jQuery Select Box Manipulation
Introduction
Manipulation of select box in jQuery requires additional skills and interaction but it’s not that complicated. This article will help you do things about select boxes without having any problems.
Select Box Creation
This should be simple and very straight forward.
jQuery('#some_element').append('');
Update 01/06/2011 – 3 different ways to select a select box option.
//select select box option
jQuery('#selectboxid option').attr('selected', true);
jQuery('#selectboxid option').attr('selected', selected);
$("#selectboxid").attr('selectedIndex', indexnumber);
Select Box Option with jQuery
Here is the code for adding option in select box. Just paste it and edit some parts of it to fit your needs.
//obj is the list of option values
function(obj)
{
var create = '';
jQuery('#some_element').append(create);
}
Alternatively, You can create options in a list of elements and append it in using pure jQuery.
function(id, obj)
{
jQuery('#some_element').append('');
jQuery.each(obj, function(val, text) {
jQuery('#'+id).append(
jQuery('');
for(var i = 0; i '+obj[i]+'Getting Value in Select Box
We might need to know what the current value of the option selected is.
[js]
//#selectbox is the id of the select box
jQuery('#selectbox option:selected').val();
[code lang="js"]
You can get the text of the option by doing this.
//#selectbox is the id of the select box
jQuery(‘#selectbox option:selected’).text();
//#selectbox is the id of the select box
$(“#selectList option[value=’thisistheone’]”).text();
//#selectbox is the id of the select box
$(“#selectList option:first”).text()
//#selectbox is the id of the select box
$(“#selectList option:eq(3)”).text()
//#selectbox is the id of the select box
$(“#selectList option:not(option:first, option:last)”).each(function(){
$(this).text();
});
[/cc]
Getting multiple values in Select Box
Retrieve multiple values with this code.
jQuery('#some_element:selected').each(function(){
alert(jQuery(this).text());
alert(jQuery(this).val());
});
var current = [];
jQuery('#some_element:selected').each(function(index, selectedObj){
current[index] = $(selectedObj).text();
});
var foo = jQuery('#multiple :selected').map(function(){return jQuery(this).val();}).get();
Remove Element in Select Box
There is nothing special here. Just paste this code and modify it, so the item that will be removed is what you’ve chosen.
jQuery('#selectbox: selected').remove();
Here we will remove all elements except the first and last one.
//#selectbox is the id of the select box
$("#selectbox option:not(option:first, option:last)").remove();
Selecting option in select box
Do this to select an option in the select box.
jQuery('#selectbox option').attr('selected', 'selected');
Unselect option
Reversal of the code above
jQuery('#selectbox option').attr('selected', false);
onChange event finds slected option
$('#selectbox').change(function(){
var val = $(this).find('option:selected').text();
alert('i selected: ' + val);
});
onchange find select box selected items.
$('#selectbox').change(function(){
$(this).find('option:selected').each(function () {
alert('i selected: ' + $(this).text());
}
});
Conclusion
If you have followed the steps properly, you should get things done. As you can see, it’s not that hard!
Source:
http://hungred.com/how-to/tutorial-jquery-select-box-manipulation-plugin/