:::: MENU ::::

HTML select element manipulation using jQuery

Jump to Topic

[1] Adding single option to combo-box

To add single option into the HTML <option> element using jQuery.

  • First of all get the value in string format and assign it to element.
  • Then use jQuery append() method on <select> element by simply supplying the HTML markup into append function.

HTML:

JavaScript

Demo –

[2] Adding multiple options to Combobox

To add multiple options into the HTML <option> element using jQuery.

  • First of all get comma separated value in string format and assign it to element.
  • Then convert comma separated string into array using javascript split() function
  • Then use jQuery each() for array and iterate array. While iterating just append values into dropdown using jQuery append() function.

HTML

JavaScript

Demo

[3] Delete option element from HTML dropdown

To delete option from HTML <option> element using jQuery.

  • Get the value of selected element
  • Then use jquery find() function to find option.
  • Use jQuery remove() function to remove found option.

HTML

JavaScript

Demo

[4] Removing multiple options element from Listbox

To remove multiple options from HTML <option> element using jQuery.

  • Get the value of selected elements in array.
  • Then use jquery each() function to iterate over above array.
  • Within loop, use jQuery find() method to find “options” of “select” element and then use remove() function to remove() it.

HTML

JavaScript

Demo

[5] Adding option to Combobox at specific position

To add option to HTML <option> at specific position using jQuery.

  • Get the value of combobox and position in to some variable.
  • Juse jQuery insertBefore() function in combination of find() and get() function to get this done.

HTML

JavaScript

Demo

[6] Selecting single <option> using jQuery.

To select single element of dropdown using jQuery,

  • Get the value of text string in to some variable.
  • Then use each() function on dropdown options.
  • Within each() iteration if option element’s text match with value of text string, assign that option value as dropdown value by using jQuery val() function.

HTML

JavaScript

Demo

[7] Selecting multiple <option> using jQuery.

To select multiple elements of dropdown using jQuery,

  • Get the value of comma separated text string in to some variable.
  • Create array of it using javascript split() function.
  • Then use jquery each() function to iterate over dropdown option.
  • Within each() iteration if option element’s text found in array we create by split(), just add that value to another temporary array.
  • Then assign that temporary array to dropdown.

HTML

JavaScript

Demo

[8] Show selected element on change event

Use jquery on() function and assign ‘change’ as first argument to bind change event on any HTML <select> element.

  • To get Get value of HTML select element.
    Use: $(‘select’).val()
  • Get text of HTML select element
    Use: $(‘select’).find(“option[value='”+$(‘select’).val()+”‘]”).text();
  • Get selectedIndex of HTML select element

Use: $(‘select’).prop(‘selectedIndex’);

HTML

JavaScript

 

Demo

See all demo in Action – http://code.vikaskbh.com/dropdown/

One Comment

So, what do you think ?

  •