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!!

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

how to hide\show items in ddl

I have a ddl control. I want to change the visibility of some items on the client-side (JS).
I only found methods to insert\remove items.
But I only want to hide\show them.
Does someone has an idea how to do so ?

You need to access the item and set its [edit]style.display[/edit] to "none":
<html>
<head>
<script type="text/javascript">
function hideItem() {
document.getElementById("a3").style.display = "none";
}
</script>
<body onload="hideItem()">
<form>
<select name="ddl" size="1">
<option id="a1">Option 1</option>
<option id="a2">Option 2</option>
<option id="a3">Option 3</option>
<option id="a4">Option 4</option>
<option id="a5">Option 5</option>
</select>
</form>
</body>
</html>

I think you are looking for the
<span style="display:none">
option. You can toggle this style using Javascript.

In Firefox, you can use the display style:
<select id="s" name="ddl" size="1">
<option id="a1">Option 1</option>
<option id="a2">Option 2</option>
<option id="a3">Option 3</option>
<option id="a4">Option 4</option>
<option id="a5">Option 5</option>
</select>
and:
document.getElementById("a3").style.display = "none";
However, this will not work on Internet Explorer. For IE, you can only remove the element entirely (possibly re-adding it later):
document.getElementById("s").options[2] = null;
You could move the element to a separate, hidden <select /> if you want to store it somewhere for adding back later.

The only thing you can do is removing the option.
You can do this simply in jQuery by:
$('#yourOptionId').remove();
Or you can disable the option by:
$('#yourOptionId').attr('disabled', 'disabled');
And enable by:
$('#yourOptionId').removeAttr("disabled");
But no there is no way to simply hide an option.
By "ddl control" I'm assuming the structure will be like:
<select id="selectId">
<option id="optionId"></option>
</select>

Using JQuery "select option:first-child" just for an element with a given id?

This code looks at if dropdownlist with 'townid' has an option of Central and then puts Central after the first option at all dropdownlists.
var central = $('#townid option:contains("Central")');
if(central){
central.insertAfter('select option:first-child');
}
My problem is that:
How can I add it just after dropdownlist that has id of townid? I mean something like:
var central = $('#townid option:contains("Central")');
if(central){
central.insertAfter('#townid select option:first-child');
}
For example:
<select id=townid>
<option value="5000">AL</option>
<option value="5001">NY</option>
<option value="5002">LA</option>
<option value="5003">NY</option>
<option value="5204">Central</option>
<option value="5024">FA</option>
</select>
<select id="someid">
<option value="3002">Brooklyn</option>
<option value="6001">Manhattan</option>
</select>
After that process they should be seem like:
<select id=townid>
<option value="5000">AL</option>
<option value="5204">Central</option>
<option value="5001">NY</option>
<option value="5002">LA</option>
<option value="5003">NY</option>
<option value="5024">FA</option>
</select>
<select id="someid">
<option value="3002">Brooklyn</option>
<option value="6001">Manhattan</option>
</select>

How can I add it just after dropdownlist that has id of townid?
Okay, I’m gonna assume your HTML looks something like this:
<select id="townid">
<option>
…
</option>
</select>
In that case, you could use:
$('#townid option:contains("Central")').appendTo('#townid option');
If there are multiple option elements inside #townid and you only want to select the first, just change the selector:
$('#townid option:contains("Central")').appendTo('#townid option:first');
In your example, don’t use if (central), use if (central.length) instead.

You just messed up the selector, because #townid IS the select tag.
var central = $('#townid option:contains("Central")');
if(central.length === 1){
central.insertAfter('#townid option:first-child');
}

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/