JavaScript

jQuery Select Box Manipulation

Sam Deering
Share

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/