Jump to Topic

• Adding single option to combo-box
• Adding multiple options to Combobox
• Delete option element from HTML dropdown
• Removing multiple options element from Listbox
• Adding option to Combobox at specific position
• Selecting single <option> using jQuery
• Selecting multiple <option> using jQuery.
• Show selected element on change event

[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:

<input type="text" id="single_add_text"> 
<button id="add_single"> Add</button>
<select name="languages" id="languages1" >
  <option value="c">C</option>
  <option value="c++">C++</option>
  <option value="php">PHP</option>
  <option value="perl">PERL</option>
  <option value="ruby">RUBY</option>
  <option value="python">PYTHON</option>
  <option value="go">GO</option>
</select>

JavaScript

(function($){
  $('#add_single').on('click',function(){
  var text_to_add = $('#single_add_text').val();
  if($.trim(text_to_add) == "") return;
    $('#languages1').append(
      "<option value='"+text_to_add+"'>"+text_to_add+"</option>"
    );
  });
})(jQuery);

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

<input type="text" id="multiple_add_text" >
<input type="button" value="Add" id="add_multiple">
  <select name="languages" id="languages2" >
  <option value="c">C</option>
  <option value="c++">C++</option>
  <option value="php">PHP</option>
  <option value="perl">PERL</option>
  <option value="ruby">RUBY</option>
  <option value="python">PYTHON</option>
  <option value="go">GO</option>
</select>

JavaScript

(function($){
  $('#add_multiple').on('click',function(){
    var multiple_text_to_add = $('#multiple_add_text').val();
    /* ignore if you want to skip validation */
    if($.trim(multiple_text_to_add) == "") return; 
  
    var multiple_text_to_add_array = multiple_text_to_add.split(",");
    $(multiple_text_to_add_array).each(function(k,v){
      $('#languages2').append(
        "<option value='"+v+"'>"+v+"</option>"
      );
    });
  });
})(jQuery);

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

<select name="languages" id="languages3" >
  <option value="c">C</option>
  <option value="c++">C++</option>
  <option value="php">PHP</option>
  <option value="perl">PERL</option>
  <option value="ruby">RUBY</option>
  <option value="python">PYTHON</option>
  <option value="go">GO</option>
</select>
<input type="button" id="remove_single" value="Remove" />

JavaScript

(function($){
  $('#remove_single').on('click',function(){
    var text_to_remove = $('#languages3').val();
    $("#languages3")
      .find("option[value='"+text_to_remove+"']")
      .remove();
    });
})(jQuery);

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

<select name="languages" id="languages4" multiple>
  <option value="c">C</option>
  <option value="c++">C++</option>
  <option value="php">PHP</option>
  <option value="perl">PERL</option>
  <option value="ruby">RUBY</option>
  <option value="python">PYTHON</option>
  <option value="go">GO</option>
</select>
<br/>

<input type="button" id="remove_multiple" value="Remove Multiple" />

JavaScript

(function($){
  $('#remove_multiple').on('click',function(){
    var multiple_text_to_remove = $('#languages4').val();
    $(multiple_text_to_remove).each(function(k,v){
    $("#languages4")
      .find("option[value='"+v+"']")
      .remove();
    });
  });
})(jQuery);

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

<h3>Adding option to Combobox at specific position</h3>
<label>Text to Add</label>
<input type="text"  id="text_to_add_at_position" >
<label>Position</label>
<input type="text"  id="position" value="3">
<input type="button" value="Add" id="add_at_position">
<select name="languages" id="languages5" >
  <option value="c">C</option>
  <option value="c++">C++</option>
  <option value="php">PHP</option>
  <option value="perl">PERL</option>
  <option value="ruby">RUBY</option>
  <option value="python">PYTHON</option>
  <option value="go">GO</option>
</select>

JavaScript

(function($){
  $('#add_at_position').on('click',function(){
    var text_to_add_at_position = $('#text_to_add_at_position').val();
    var position                      = $('#position').val();
    if($.trim(text_to_add_at_position) == "" || $.trim(position)=="") return;
      $("<option value='"+text_to_add_at_position+"'>"+text_to_add_at_position+"</option>")
        .insertBefore($("#languages5")
        .find("option")
        .get(position-1));
      });
})(jQuery);

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

<label>Text to Select</label>
<input type="text"  id="text_to_select" >
<input type="button" value="Select" id="select_option" >
<br/>
(should be CAPS as visible in dropdown and not its value)
<br/>
<select name="languages" id="languages6" >
  <option value="c">C</option>
  <option value="c++">C++</option>
  <option value="php">PHP</option>
  <option value="perl">PERL</option>
  <option value="ruby">RUBY</option>
  <option value="python">PYTHON</option>
  <option value="go">GO</option>
</select>

JavaScript

(function($){
  $('#select_option').on('click',function(){
    var text_to_select = $('#text_to_select').val();
    if($.trim(text_to_select) == "") return;
      $("#languages6 option").each(function(k,v){
        if($(v).filter('option').text() == text_to_select) {
          $('#languages6').val($(v).filter('option').val());
        }
      });
    });
})(jQuery);

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

<label>Text to Select</label>

<input type="text" id="texts_to_select" > (comma separated) <input type="button" value="Select" value="Select Multiple" id="select_options">
<br/>
(should be CAPS as visible in dropdown and not its value)
<br/>
<select name="languages" id="languages7" multiple>
  <option value="c">C</option>
  <option value="c++">C++</option>
  <option value="php">PHP</option>
  <option value="perl">PERL</option>
  <option value="ruby">RUBY</option>
  <option value="python">PYTHON</option>
  <option value="go">GO</option>
</select>

JavaScript

(function($){
  $('#select_options').on('click',function(){
    if($.trim('#texts_to_select') == "") return;
    var texts_to_select = $('#texts_to_select').val().split(',');
    var selected_values = [];
    $("#languages7 option").each(function(k,v){
      if(texts_to_select.indexOf($(v).filter('option').text()) >= 0) {
        selected_values.push($(v).filter('option').val());
      }
    });
  $('#languages7').val(selected_values);
  });
})(jQuery);

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

<select name="languages" id="languages8" >
  <option value="c">C</option>
  <option value="c++">C++</option>
  <option value="php">PHP</option>
  <option value="perl">PERL</option>
  <option value="ruby">RUBY</option>
  <option value="python">PYTHON</option>
  <option value="go">GO</option>
</select>
<br/>
<ul id="output_selected_elements">
</ul>

JavaScript

(function($){
  $('#languages8').on('change',function(){
    $('#output_selected_elements').html("");
    $('#output_selected_elements').append("<li>Value Selected : "+$(this).val()+"</li>");
    $('#output_selected_elements').append("<li>Visible Text : "+$(this).find("option[value='"+$(this).val()+"']").text()+"</li>")
    $('#output_selected_elements').append("<li>Selected Index : "+$('#languages8').prop('selectedIndex')+"</li>");
  });
})(jQuery);

Demo