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());
});
});
Related
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();
});
I have a select box that allows the user to select a category for an article of clothing. The categories can have sub categories, so in order to display that hierarchy, I write the options like this:
Category Name
├─ Sub-category name
which looks like this:
Category Name
├─ Sub-category name
Unfortunately, when the user selects a sub-category, then the text that shows in the select box includes the structure characters. How do I only display the category name when an option is selected, but keep the structure HTML when they change options? Is there a better way to show the hierarchy of categories within the options? Optgroups don't work for me, because the user needs to be able to select the top-level categories also.
Here's what it looks like now.
http://jsfiddle.net/K6yfp/
Perhaps you are looking for optgroup
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
FIDDLE
I have come up with a simple solution but could not workout more on it. Hope you will find it helpful.
HTML
<select id="Categories">
<option value="Shoes">Shoes</option>
<option value="Sneakers"> ├─Sneakers</option>
</select>
JS
$(document).ready(function(){
var SelectedCategory = $('#Categories').find('option:selected').val();
$('#Categories').bind("change",function() {
$(this).find('option:selected').attr('label',$(this).find('option:selected').val());
SelectedCategory = $(this).find('option:selected').val();
$(this).blur();
});
$('#Categories').focus(function(e){
e.stopPropagation();
$(this).find('option:selected').removeAttr('label');
}).blur(function(e){
e.stopPropagation();
$(this).find('option:selected').attr('label',$(this).find('option:selected').val());
});
});
Note: Do not forget to include the jQuery Library.
Check the Demo Fiddle.
I have two drop down lists on my ASP.NET MVC 3. When one of the drop down lists is set to "Sole Proprietor", the other needs to be set to the same.
I'm sure the JavaScript, or jQuery, is very simple for something like this, however I am having a hard time finding a good example on the web since I am populating the drop down lists manually instead of through the controller.
Can someone either help me out with the code or point me to a good resource?
<select id="ProducerType" name="nmf" style="float:left;">
<option value="Principal">Principal</option>
<option value="Producer">Producer</option>
<option value="SoleProprietor">Sole Proprietor</option>
</select>
<select id="Role" name="nmf" style="float:left;">
<option value="Agent">Agent</option>
<option value="Financial Advisor">Financial Advisor</option>
<option value="Platform">Platform</option>
<option value="Principla_Owner">Principal/Owner</option>
<option value="Registered Rep">Registered Rep</option>
<option value="Sole Proprietor">Sole Proprietor</option>
</select>
jsFiddle example : http://jsfiddle.net/9GZQ2/
I set both dropdown values to "Sole Proprietor" your code has the space missing in the ProducerType select
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script type="text/javascript">
$(function(){
$("#ProducerType").change(function(){
var value=$(this).val();
if(value=="Sole Proprietor") $("#Role").val(value);
});
$("#Role").change(function(){
var value=$(this).val();
if(value=="Sole Proprietor") $("#ProducerType").val(value);
});
});
</script>
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.
Here is the issue.
I have a select dropdown list.
<select name="listingtype" id="speedD" style="width:210px;">
<option>For Sale</option>
<option>For Rent</option>
</select>
And another select drop down list where the prices appear , which on page load it is empty..
So if user clicks For Sale: then the other select drop down list, loads price list like so:
<select name="valueA" id="speedF" style="width:200px;">
<option value="Any" selected="selected">Any</option>
<option value="50000">$50,000</option>
<option value="100000">$100,000</option>
<option value="150000">$150,000</option>
<option value="200000">$200,000</option>
<option value="250000">$250,000</option>
And if they choose For Rent. Select drop down is propagated like so:
<select name="valueA" id="speedF" style="width:200px;">
<option value="Any" selected="selected">Any</option>
<option value="100">$100</option>
<option value="150">$150</option>
<option value="200">$200</option>
<option value="250">$250</option>
<option value="300">$300</option>
</select>
I need this code to be client side, no need for server side. And just wanted to know what the cleanest method for doing this is.
Cheers.
First of all I recommend setting the value attribute in your option elements.
Example:
<option value="sale">For sale</option>
<option value="rent">For rent</option>
If you have not already heard of or seen the JavaScript library known as jQuery I strongly recommend checking it out! It can be very helpful when creating a dynamic site like this using minimal JavaScript.
I would do something like the following:
<html>
...
<body>
<div id="fillme"></div>
<script type="text/javascript">
if (document.yourformname.listingtype.value == "sale") {
//it is for sale
$('#fillme').html('<select name="valueA" id="speedF" style="width:200px;"><option value="Any" selected="selected">Any</option><option value="50000">$50,000</option><option value="100000">$100,000</option><option value="150000">$150,000</option><option value="200000">$200,000</option><option value="250000">$250,000</option></select>');
} else {
//fill it with the other elements
}
</script>
</body>
</html>
Now of course you could load it more dynamically with JSON or XML but that is up to you. I really recommend checking out the library:
http://jQuery.com
Use JavaScript to fill the empty select with options when the user selects an option (either onchange or onselect, forget which) in the For Sale/For Rent select.
EDIT: More specifically, have that second box be empty when the page loads. Store the options in arrays. Use a loop to create new OPTION elements based on each array item.