I have a select with options, let's call it Car Brands:
<select id="car-brands">
<option value="noselection">Car Brand</option>
<option value="toyota">TOYOTA</option>
<option value="lexus">LEXUS</option>
</select>
And I have another 2 selects, let's call them car models:
<select id="car-models-toyota" style="display:none;">
<option value="noselection">Car Model</option>
<option value="toyota">AVENSIS</option>
<option value="lexus">CAMRY</option>
</select>
<select id="car-models-lexus" style="display:none;">
<option value="noselection">Car Model</option>
<option value="toyota">AVENSIS</option>
<option value="lexus">CAMRY</option>
</select>
I hide them, so when user selecting TOYOTA or LEXUS in first select, Car Models will show up by their theme:
$('#car-brands').change(function() {
const brand = $(this).val();
$(`#car-models-${brand}`).show();
});
And it's working, car models selects show up, but I can't understand how can I hide another with this dynamic variable?
I mean I select TOYOTA and #car-models-toyota select shows up, select LEXUS and #car-models-lexus select shows up, but when it shows up toyota select should be hidden.
Can you help me, please?
You can do this by making all select elements hidden first in each first select, change event, and then shown the desired one by your provided code. So all you have to do is to select all selects (except the brand select) with $('select').not('#car-brands') then use hide() to make all of them hidden.
So this should be something like this:
$('#car-brands').change(function() {
const brand = $(this).val();
$('select').not('#car-brands').hide();
$(`#car-models-${brand}`).show();
});
Related
Like i said in the title i want to keep a list hidden until another another list above has been selected, for example show student list after a class had been selected (so only student who belong to the selected class are shown)
<select name="class">
<option value="">class1</option>
<option value="">class2</option>
</select>
<select name="student">
<option value="">student1</option>
<option value="">student2</option>
</select>
Initially apply a hidden class (with display: none styling) to the second select list and then on the change of value (indicating a choice has been made) in the first select - remove the hidden class.
EDIT - as as suggested by #HerrSerker - the event listener is now in the JS as opposed to inline in the HTML.
Note that each select list has a selected disabled option - to allow for a blank option rather than the first option selected by default.
// add event listener for change of class select list
document.querySelector('select[name="class"]')
.addEventListener('change', updateStudent)
//function to remove the hidden class and styling of the second select list
function updateStudent() {
var el = document.querySelector('select[name="student"].hidden');
el.classList.remove('hidden')
}
select[name="student"].hidden {
display:none
}
<select name="class">
<option disabled selected></option>
<option value="">class1</option>
<option value="">class2</option>
</select>
<select name="student" class="hidden">
<option disabled selected></option>
<option value="">student1</option>
<option value="">student2</option>
</select>
I have a "master dropdown menu" that contains four options (English, Spanish, Russian, Other) as the question asks their primary language.
Below this master dropdown menu contains other questions that asks similar questions and contain the same options (English, Spanish, Russian, Other).
I am wondering if it's possible to have the other dropdown menu options have the same value selected based on the 'master dropdown menu' option. So if John Smith chooses English in the master dropdown menu, the other questions will automatically have English selected in the other dropdown menus, while also allowing John to change an Answer - he may choose Spanish for question 3. I'm hoping the solution uses JavaScript or jQuery, as PHP won't be an option.
<label>What is your primary language?</label>
<select name="question1">
<option></option>
<option value="english">English</option>
<option value="spanish">Spanish</option>
<option value="russian">Russian</option>
<option value="other">Other</option>
</select>
<label>Language your spouse speaks?</label>
<select name="question2">
<option></option>
<option value="english">English</option>
<option value="spanish">Spanish</option>
<option value="russian">Russian</option>
<option value="other">Other</option>
</select>
<label>Language your children speak?</label>
<select name="question3">
<option></option>
<option value="english">English</option>
<option value="spanish">Spanish</option>
<option value="russian">Russian</option>
<option value="other">Other</option>
</select>
When selecting the value in the master dropdown menu you can set the value to the other dropdowns via JavaScript.
document.querySelector('select[name="question1"]').addEventListener('change', function(event) {
document.querySelector('select[name="question2"]').value = event.target.value;
document.querySelector('select[name="question3"]').value = event.target.value;
});
really simple solution but should work
JSFiddle
You can do this in jQuery as follows, using nextAll() to populate the other select items:
$('select').on('change', function() {
$(this).nextAll('select').val($(this).val());
});
(Note that you probably want to add a class to your selects as the above will operate on ALL select elements on the page).
Below you are adding an EventListener to to trigger when the first item is changed and assigning its value to rest of the selectors. Please update var firstDD and reminingDD valriables based on your requirement. Or better use specific IDs for each seletor so that it would be easy to understand.
$( document ).ready(function() {
var firstDD = $("select:first-child");
var reminingDD = $("select:not(:first-child)");
console.log(reminingDD);
firstDD.change(function () {
$(reminingDD).val($(firstDD).val());
});
});
I have a DropDownList whose values i want to group by category.
What are the best practices and maybe some code samples that show proper submission of form in ASP.NET MVC 3 that contains options under different categories/groups.
Sample
In the example above, i want the category to be collapsible and not display a radio button. Also when clicked, the category should expand to display the available radio button options under that category that allow selection of only one option. I'm not interested in tracking the value of the category, what i want to get when the form is submitted is the value of the selected option under a parent category.
Has any one done some thing similar or related in MVC 3 & jQuery?
You can do something like that using the in HTML.
<select>
<optgroup label="Parent 1">
<option value="1">sub category 1</option>
<option value="2">sub category 2</option>
</optgroup>
<optgroup label="Parent 2">
<option value="3">sub category 1</option>
<option value="4">sub category 2</option>
</optgroup>
</select>
Replace the data with your modal data.
I'm very very new to jQuery. I Googled a lot before I'm asking, though it looks silly but for me its complicated.
I have a simple <select> list which has around 4 values like this image shown below.
Now at runtime, I want to hide the options and show based on index or value names in jQuery. How can I achieve this?.
My drop down box has a div region and simple select option with set of values. Please provide me a simple example.
Sample code
<Div ID = "abcd">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>
In this how to hide Volvo/Opel at run time?... like i want to show and hide these options dynamically.
Like Ex: When a button is pressed i want to hide Volvo. Similarly if another button is pressed i want to display Volvo back.
if you would like to hide the whole select you should give your select or the div containing your select an id and then you can do like :
<div id="mySelect" >your select tag here </div>
$('mySelect').show(); // or $('mySelect').hide();
http://api.jquery.com/hide/
http://api.jquery.com/show/
if you would like to hide the option you can do like below :
$("#edit-field-service-sub-cat-value option[value=" + title + "]").hide();
To be more specific to your code :
<div id="abcd">
<select id="mySelect">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>
title = 'volvo';
$("#mySelect option[value=" + title + "]").hide();
like in this post :
Hide options in a select list using jQuery
or remove it :
JQuery: Hide options of select according to option value
UPDATE: I was trying lots of different methods for doing this and none of them worked... until... I changed my dropdown menu name from (date-range) to (dateRange) removing the (-), sorry for wasting time!
I have a search form and a custom reset form button, which resets all the values in the form. I now have a dropdown menu and when the reset button is pressed, I want the first option to be selected.
This is my form:
<select name="date-range" id="date-range">
<option value="Any">Any date</option>
<option value="Today">Today</option>
<option value="Yesterday">Yesterday</option>
<option value="1 Week">Within 1 Week</option>
<option value="1 Month">Within 1 Month</option>
<option value="3 Months">Within 3 Months</option>
<option value="6 Months">Within 6 Months</option>
<option value="1 Year">Within 1 Year</option>
</script>
... and this is my javascript function that now needs to select the first dropdown value "Any".
function resetSearchForm()
{
document.searchFrm.searchStr.value='';
document.searchFrm.vertical.checked = true;
document.searchFrm.horizontal.checked = true;
** dropdown select first **
}
What is the proper way to do this? Any help gratefully received :)
This will work:
document.getElementById('date-range').selectedIndex = 0;
Example can be found here:
http://jsfiddle.net/yPmmG/3/
No javascript required, just add the selected attribute to the first option. That's what the attribute is for.
<option selected value="Any">Any date</option>
It is recommended that all select elements have one option with the selected attribute, that way there is always one selected by default. It will be the selected option when the page first loads and if the form is reset.