To get the number of items in a drop down dynamically

Sometimes you will be required to count the number of options in a select (list/drop down) dynamically. You can achieve this using the following java script or jquery code snippet. This will give you the total number of options in select input field in a form, that having a unique id. You can use other selectors instead of id based selection. The number of options in a drop down (combo box/list box) can be achieved using the following javascript code snippet,

document.getElementById('SELECT_ID').options.length;

using jquery we can achieve the same as,

$("#SELECT_ID").attr('options').length;

For eg:- if the html code for the select is like this

<select id="myselect">

<option value="I want sleep" >I want sleep</option>

<option value="I want go" >I want go</option>

<option value="I can drive" >I can drive</option>

<option value="I can code" >I can code</option>

</select>

then the javascript code will be,

document.getElementById('myselect').options.length;

using jquery we can achieve the same as,

$("#myselect").attr('options').length;

Add a new option to drop down using java script and jquery

Sometimes the developer will need to add a new option to the select (drop down/list) dynamically. You can achieve this by using java script or jquery. The below code will add a new option to the existing select input field. The id of the select is the selector used in the case, you can use other selectors too.To add a new option dynamically to drop down the following java script code can be used,

var newoption = document.createElement("OPTION");
        newoption .text = 'Option_display_text';
        newoption .value = 'Option_value';
        document.getElementById('DROPDOWN_ID').options.add(newoption ); 

same can be achieved using jquery using this snippet,

$("#DROPDOWN_ID").append('<option value="Option_value">Option_display_text</option>');

For e.g:- if the html for select (drop down) is like this,

<select id="country">

<option value="India" >India</option>

<option value="KSA" >KSA</option>

<option value="UK" >UK</option>

<option value="USA" >USA</option>

</select>

to insert a new option quatar then the javascript code will look like this,

var newoption = document.createElement("OPTION");
        newoption .text = 'quatar';
        newoption .value = 'quatar';
        document.getElementById('country').options.add(newoption );

and in jquery it is like this,

$("#country").append('<option value="Quatar">Quatar</option>');

Get the index of selected item in drop down using java script or jquery

Sometimes you will need the index of the selected item in a select (drop down/list) dynamically. You can use the javascript or jquery code snippet to achieve this. This will give you the index of the selected item in the select box.This will give the zero based index of the option in a set of options. To get the index of the selected item in a drop down or a list box we can use the following javascript code,

var index=documet.getElementById('element_id'). selectedIndex;

The same can be done using jquery as,

var index=$("#element_id").attr("selectedIndex"); 

For e.g:- if the html code is like this,

<select id="my_select">

<option value="I loves you">I loves you</option>

<option value="I hates you">I hates you</option>

<option value="I like you">I like you</option>

<option value="I know you">I know you</option>

</select>

Then the javascript code will be like this,

var index=documet.getElementById('element_id'). selectedIndex;

and jquery like this,

var index=$("#element_id").attr("selectedIndex");

Setting value of drop down dynamically using javascript or jquery

If you want dynamically select or set a select or drop down or list box input value, in such cases the javascript or jquery code can be used to do this. Just a single line of code can do this as shown below. You will need to specify the unique id of the input field. You can use other jquery selectors too to do this if you don't want use the id.

To set the value of a select (drop down or list box) using java script is like this,

document.getElementById('Drop_Down_ID').value='The Option to Set';

the same can be achieved using jquery using this,

$("#my_select").val("The Option to Set");

for e.g:- if our html is like this,

<select id="my_select">

<option value="Want start a business">Want start a business</option>

<option value="Want find a job">Want find a job</option>

<option value="Want marry">Want marry</option>

<option value="Want sleep">Want sleep</option>

</select>

then we can use the javascript code as,

document.getElementById('my_select').value='Want marry';

to set the same option using jquery is,

$("#my_select").val("Want marry");