We Keep Coding

Have dropdown menus use value of previous dropdown

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());
});
});

Removing some options from select option

I have a select option in my form that has different values each time but is always 4 options.
Here is my code (PS: remember option values, changes for each time)
<select name="selectoption" id="selectoption" selected>
<option value="2623">option1</option>
<option value="8982">option2</option>
<option value="1237">option3</option>
<option value="9362">option4</option>
</select>
How can I remove the first and second options from my option list?
I have tried with:
$("#selectoption option:selected").remove();
But it just removes the first option (option 1), and I want first 2 options to be removed or in other word, I want to choose which options needs to be removed.

Use :lt(aka lower than) selector:
$("#selectoption option:lt(2)").remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selectoption" id="selectoption" selected>
<option value="2623">option1</option>
<option value="8982">option2</option>
<option value="1237">option3</option>
<option value="9362">option4</option>
</select>
It will remove the option tags with index=2 or lower, therefore the first two elements.

Show/Hide Div in JQuery for three select option

<select name='main'>
<option value='For Sale'>For Sale</option>
<option value='Community'>Community</option>
</select>
<select name='sub'>
<option value='Animal'>Animal</option>
<option value='Fish'>Fish</option>
</select>
<select name='sub'>
<option value='Friend'>Friend</option>
<option value='Relitive'>Relitive</option>
</select>
<select name='sub2'>
<option value='Animal Thing'>Animal Thing</option>
<option value='Fish Thing'>Fish Thing</option>
</select>
<select name='sub'>
<option value='Best Friend'>Best Friend</option>
<option value='Relitive Home'>Relitive Home</option>
</select>
This is my html code and I want that when the user selects the main menu it will then show the sub menu and when the user selects the sub menu it will then show sub2 menu. I want to do this with Jquery, can someone help me with this?

I'm supposing that the sub and sub2 classes are disabled / hidden?
You want to check if the user has selected a value in the main.
You can find this in the Jquery documentation :selected Selector
So now you can see if you're main select was selected and then you can use this to enable to next select sub
If you want furthermore details on Selector, I think this question How to check if an option is selected? has some solid answers.
Cheers!

classic asp - dropdown to select all dropdowns with the same value as the first dropdown

I have a primary drop down list that has three values:
1 - select
2 - Fail
3 - pass
the page is populated from the database, so here you could have anything from 1 to 50 dropdown to set the status of each record as fail or pass.
I would like to select 'fail' from the primary dropdown, any dropdown's that are populated from database should set to the selection i have made as being 'fail'
hope someone can help.
thank you
Yas

You can do this using javascript or jquery.
OnChange of first dropdown, select all dropdown values accordingly.
EDIT:
For your reference, I have prepared an example. Refer LIVE DEMO
HTML:
<select class="dDown">
<option value="select">select</option>
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
</select>
<select>
<option value="select">select</option>
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
</select>
<select>
<option value="select">select</option>
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
</select>
​
JS:
$('.dDown').on("change", function() {
$('select').not('.dDown').val(this.value);
});​

dynamic dropdown list ( select boxes )

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.