HTML SELECT/Dropdown with JavaScript/jQuery
Common operations
A list of commonly needed operations on HTML SELECT/Dropdown using JavaScript/jQuery. Let me know if you find it useful or if you have additions/suggestions to improve the list.
JavaScript
// get the element
var dd = document.getElementById("dropdown");
// Get the total number of options
dd.length;
// Get the index of selected option
dd.selectedIndex;
// get the value of selected option
dd.options[dd.selectedIndex].value;
// Get the selected option/text
dd.options[dd.selectedIndex].text;
// Reset the dropdoown option; select first option
dd.selectedIndex = 0;
// Reset the dropdoown option; select last option
dd.selectedIndex = dd.length-1;
// Create and attach an option dynamically
var newOption = document.createElement('option');
// create option/text
newOption.text="new option";
// create option value
newOption.value="new value";
// attach the option to the dropdown
dd.options[dd.options.length] = newOption;
// Create and attach an option dynamically
dd.options[dd.options.length] =
new Option("new option","new value");
// Create and attach an option dynamically
dd.add(new Option("new option 2","new value 2"));
// Remove all options from the dropdown
dd.length = 0;
// Remove all options from the dropdown
dd.options.length = 0;
// Remove the first option from the dropdown
dd.remove(0);
// Remove the last option from the dropdown
dd.remove(dd.options.length-1);
// Remove the last option from the dropdown
dd.remove(dd.length-1);
// Remove the dropdown/select element.
// ParentID must be an ID of the parent element.
document.getElementById("ParentID").removeChild(dd);
jQuery
// Reset the dropdoown option; select first option
$("#dropdown").prop("selectedIndex",0);
// Reset the options on all SELECT/Drodown elements.
$("select").each(function(){
$(this).find("option:first").prop("selected","selected");
});
// Reset the options on all SELECT/Drodown
// elements to last option
$("select").each(function(){
$(this).val($("option:last",this).val());
});
// Get the value of the selected option/text
$("#dropdown").val();
// Get the index of selected option
$("#dropdown").prop("selectedIndex");
// Get the selected text
$("#dropdown option:selected").text();
// Get ALL text in the SELECT element; space separated
$("#dropdown").text();
// Select an option with value
// selects the option with value="value-2"
$("#dropdown").val("value-2");
// Add an option
$("#dropdown").append("<OPTION value="value-new">option-new</OPTION>");
// Remove the last option from SELECT
$("#dropdown option:last").remove();
// Remove all options from SELECT
$("#dropdown option").remove()
// Remove the SELECT element from DOM
$("#dropdown").remove()
Thank You!
Your comment has been submitted. It will appear on this page shortly! OKYikes, Sorry!
Error occured. Couldn't submit your comment. Please try again. Thank You! OK