Develop Reference

How to use getElementByID in JavaScript to connect to my HTML drop down box?

I have a drop-down box in HTML showing three options. I am also using javaScript and want to use the getElementById tool to connect the two. However, I only have one ID for the drop-down box. How does javascript recognize that I have three different options?

There's actually a demo on w3schools.com showing exactly what you're asking. To get the number of options, you could do something like
document.getElementById("mySelect").options.length

Here is an example of how to retrieve the value of a dropdown: https://jsfiddle.net/ykcwgnm8/
You use getElementBy* functions to get the element, however value attribute denotes which item is currently selected.
HTML:
<select id="dropdown">
<option value="1">First option</option>
<option value="2">Second option</option>
<option value="3">Third option</option>
</select>
JS:
function onChangeHandler(e)
{
alert("you have selected item with value "+this.value);
}
document.getElementById("dropdown").addEventListener("change", onChangeHandler);

You can listen for change like this
var list = document.getElementById("mySelect")
list.addEventListener('change', function(e){
console.log(e.target.selectedIndex)
console.log(e.target.options[e.target.selectedIndex].text)
})
<select id="mySelect">
<option>Apple</option>
<option>Orange</option>
<option>Pineapple</option>
<option>Banana</option>
</select>

You can do something like this, here is an example:-
html
<select id="selectBox">
<option value="1">option 1</option>
<option value="2" selected="selected">option 2</option>
<option value="3">option 3</option>
</select>
js
var e = document.getElementById("selectBox");
var selectedValue = e.options[e.selectedIndex].value;
// this will give selectedValue as 2
Hope you find this useful!!

Conditional list options based on previous selection

So I am a newbie on Wordpress working with a theme to make a car platform. Unfortunately, on the theme, the car-selling functionalities differ from what we need. One of those things is: show or hide options based on previous selection with dropdown lists.
Quick example: If 'BMW' is chosen on 'Make', then only show '1 series' '3 series' '5 series' on 'Model', if '3 series is chosen, then only show 318i 320i 330i on 'Engine', aso. From a logical point of view, it is so easy, but I have no clue how to translate this into code. Luckily, I've found pretty good code here already, but this works only for the next dropdown list. My question is, how does the javascript/jquery code have to look like so you can make more than 2 conditional dropdown lists? You could take Engine as an example. Thank you
HTML code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="req_make">Make</label>
<select id="req_make" name="make">
<option disabled="disabled" selected="selected" value="">Choose Make</option>
<option class="BMW" value="BMW">BMW</option>
<option class="Audi" value="Audi">Audi</option>
<option class="VW" value="VW">VW</option>
</select>
<label for="req_model">Model</label>
<select id="req_model" name="model">
<option disabled="disabled" selected="selected" value="">Choose model</option>
<option class="BMW" value="1er">1er</option>
<option class="BMW" value="3er">3er</option>
<option class="BMW" value="5er">5er</option>
<option class="BMW" value="7er">7er</option>
<option class="Audi" value="A4">A4</option>
<option class="Audi" value="A8">A8</option>
<option class="Audi" value="Q7">Q7</option>
<option class="VW" value="Golf">Golf</option>
<option class="VW" value="Touran">Touran</option>
</select>
<label for="req_engine">Engine</label>
<select id="req_engine" name="engine">
<option disabled="disabled" selected="selected" value="">Choose engine</option>
<option class="BMW" value="7er">7er - 730i</option>
<option class="BMW" value="7er">7er - 730Li</option>
<option class="BMW" value="7er">7er - 735i</option>
</select>
Javascript code:
$(function(){
$("#req_make").on("change",function(){
var levelClass = $('#req_make').find('option:selected').attr('class');
console.log(levelClass);
$('#req_model option').each(function () {
var self = $(this);
if (self.hasClass(levelClass) || typeof(levelClass) == "undefined") {
self.show();
} else {
self.hide();
}
});
});
});

You can specify any number of selectors to combine into a single result. So change $('#req_model option').each(function () { ... to $('#req_model option, #req_engine option').each(function () { ... to solve this.

I just did it on my own. It is working, but of course I don't know if it's the right way to do it. I am taking the value of the former list and assigning it to the class of the next, while changing attr('class') to attr('value'). https://jsfiddle.net/agdkw1xm/

Show different options depending on what is selected

I want to make it so that if United States is selected from the drop down list State list shows, if Canada is selected then the Province list shows. How can this be done?
<select name="country">
<option value="US">United States</option>
<option value="CA">Canada</option>
</select>
<select name="state">
<option value="1">State 1</option>
<option value="2">State 2</option>
<option value="3">State 3</option>
</select>
<select name="province">
<option value="1">Province 1</option>
<option value="2">Province 2</option>
<option value="3">Province 3</option>
</select>

If you're using JQuery, i'd recommend looking into the "change" event, combined with "show" and "hide" functions.
I won't write all the code for you, but something to the effect of;
$("#country").change(function()
{
// get value of "country"
// if it's 'US';
$("#state").show();
// otherwise
$("#province").show();
});
It's also generally better to use id's instead of the "name" attribute, on your elements. That enables very quick lookup of elements, and that's the only way the hash selector will work. ("#country"). If you need to use the "name" attribute, your selector could look like
$("select[name=\"country\"]")

You can do:
$('select[name="country"]').change(function() {
var val = this.value;
if(val == "US") {
$('select[name="state"]').show().siblings('select[name="province"]').hide();
} else {
$('select[name="province"]').show().siblings('select[name="state"]').hide();
}
}).change();
Fiddle Demo

You can do this in plain javascript by hiding the <select>'s using display:none and then exposing them using an if statement in the onChange for the primary <select>.
<select name="country" onchange="if (this.value == 'CA') { document.getElementById('state').style.display=''; } else { document.getElementById('province').style.display=''; };">
Here's a working example: http://jsfiddle.net/u7NpP/

select option using jquery fails?

Here iam trying to get values based on #category selection when i select a category men or women,following select option should show the relevant options.what i did satisfied my requirement but when i try to access it using keyboard(down arrow) it shows all the options of the #subcategory.here is the code and fiddle.any help is thankful.
my fiddle http://jsfiddle.net/JUGWU/
HTML:
<select id="category" name="category">
<option>-select-</option>
<option value="MEN" id="menu1">MEN</option>
<option value="WOMEN" id="menu2">WOMEN</option>
</select>
<br>
<select id="subcategory">
<option></option>
<option id="Clothing" value="Clothing">Clothing</option>
<option id="Accessories" value="Accessories">Accessories</option>
<option id="Footwear" value="Footwear">Footwear</option>
<option id="Watches" value="Watches">Watches</option>
<option id="Sunglasses" value="Sunglasses">Sunglasses</option>
<option id="Bags" value="Bags">Bags</option>
</select>
Jquery:
$(document).ready(function(){
$("#category").change(function() {
var xyz = $("option:selected").attr("id");
alert(xyz);
if(xyz === "menu1"){
$("#subcategory option").hide();
$("#Clothing,#Footwear").show();
}
});
});

Try this in your conditional. The disabled property doesn't allow keyboard selection. Seems to work for me.
$("#subcategory option").prop('disabled', true).hide();
$("#Clothing,#Footwear").prop('disabled', false).show();
Also, your logic breaks if a user switches from men to women.

This answer is not exactly addressing your problem (using keyboard(down arrow)) but I think it is IMHO a better way to do what you want. And also I used the fixed part from #user2301903 answer, just to make my point. my main point here was using the markup attributes.
We can use our markup attributes to have less complexity, I changed your markup like this (added a catg attribute):
<select id="category" name="category">
<option>-select-</option>
<option value="MEN" id="menu1" catg="m">MEN</option>
<option value="WOMEN" id="menu2" catg="w">WOMEN</option>
</select>
<br>
<select id="subcategory">
<option></option>
<option id="Clothing" value="Clothing" catg="m">Clothing</option>
<option id="Accessories" value="Accessories" catg="w">Accessories</option>
<option id="Footwear" value="Footwear" catg="m">Footwear</option>
<option id="Watches" value="Watches" catg="w">Watches</option>
<option id="Sunglasses" value="Sunglasses" catg="w">Sunglasses</option>
<option id="Bags" value="Bags" catg="w">Bags</option>
</select>
and your code like this:
$(document).ready(function () {
$("#category").change(function () {
var catg = $("option:selected").attr("catg");
//from #user2301903 answer
$("#subcategory option").prop('disabled', true).hide();
$("option[catg=" + catg + "]").prop('disabled', false).show();
});
});
and this is your working DEMO;
and this one is another way of doing what you want which works even in IE: IE_DEMO

Submitting a value with jQuery

I've been pulling my hair out with this one, although I'm certain the solution is embarrassingly simple! I have developed a pull-down menu that requires a selection before presenting more choices, based on the initial selection. It works fine.
However, I need to have jQuery submit the value of the option chosen without a submit button present. So, basically, when a user selects a fruit size, the user is taken to the relevant page in the option value. I cant figure it out! Heres my code:
jQuery:
<script type="text/javascript">
$(document).ready(function()
{
$('#fruit').change(function()
{
var val = $('#fruit').val();
$('.fruitSubSelect').hide();
if(val)
{
$('#fruit'+val).show();
$('#noFruit').hide();
}
});
});
</script>
CSS to hide size select:
<style type="text/css">
.fruitSubSelect {display: none;}
</style>
HTML:
<form action="nothing">
<select id="fruit">
<option value="">Choose Fruit</option>
<option>Apple</option>
<option>Orange</option>
</select>
<select id="fruitApple" class="fruitSubSelect">
<option value="">Choose Size</option>
<option value="http://www.mysite.com/big-apple.html">Big Apple</option>
<option value="http://www.mysite.com/small-apple.html">Small Apple</option>
</select>
<select id="fruitOrange" class="fruitSubSelect">
<option value="">Choose Size</option>
<option value="http://www.mysite.com/big-orange.html">Big Orange</option>
<option value="http://www.mysite.com/small-orange.html">Small Orange</option>
</select>
<select id="noFruit">
<option value="">Choose A Fruit First</option>
<option value="">Please Select Fruit First</option>
</select>
</form>
Would appreciate any help! Thanks.

I think you're looking for something like this:
$(".fruitSubSelect").change(function(){
window.location.href = this.value;
});
Example: http://jsfiddle.net/jonathon/bWUnR/
This will get the selected value of the dropdown and set the window location to it (so the page will go to it).

the addition of this into your jquery alert's the selected option's URL:
$('.fruitSubSelect').change(function(){
alert($(':selected',$(this)).val());
});
live example: http://jsfiddle.net/274Gv/

With dropdowns, do not use .val(). :selected is what you're looking for. http://api.jquery.com/selected-selector/