Tutorial: jQuery Select Box Manipulation Without Plugin

In jQuery, working with select box required some additional knowledge and interaction with jQuery. You may have some problem manipulating select box during your web development on jQuery. In this article we will discuss how you can solve this without any additional plugin to kill efficiency.

Create Selext Box In jQuery

Create a select box is very simple and straight forward. Just write a string with the normal select tag and a select box is created in jQuery

jQuery('#some_element').append('<select></select>');

I bet everyone would have tried this and it work. However, manipulating might be a more challenging task.

Add Option In Select Box With jQuery

One easy way is to create a string with the whole element and create it straight away

//obj is the list of option values
function(obj)
{
        var create = '<select id="test">';
        for(var i = 0; i < obj.length;i++)
        {
                create += '<option value="'+obj[i]+'">'+obj[i]+'</option>';
        }
        create += '</select>';
        jQuery('#some_element').append(create);
}

Another way to create a list of elements is to create its option and append it in using pure jQuery.

function(id, obj)
{
        jQuery('#some_element').append('<select id="'+id+'"></select>');
        jQuery.each(obj, function(val, text) {
                jQuery('#'+id).append(
                jQuery('<option></option').val(val).html(text)
        );})
}

You may not be familiar what i wrote above. Hence, a more javascript approach is shown below.

function(id, obj)
{
        jQuery('#some_element').append('<select id="'+id+'"></select>');
        for(var i = 0; i < obj.length;i++)
        {
                jQuery('#'+id).append('<option value="'+obj[i]+'">'+obj[i]+'</option')
        }
}

Get Select Box Value/Text In jQuery

Sometimes we want to know what is the value of the selected option. This is how we do it. Please bear in mind that there shouldn’t be any spaces between the : and selected.

//#selectbox is the id of the select box
jQuery('#selectbox option:selected').val();

On the other hand, we can get the text of the option by doing this.

//#selectbox is the id of the select box
jQuery('#selectbox option:selected').text();

What if you know the value of the options you want to get instead of the one selected?

//#selectbox is the id of the select box
$("#selectList option[value='thisistheone']").text();

How about the first element on the select box?

//#selectbox is the id of the select box
$("#selectList option:first").text()

How about the n element on the select box?

//#selectbox is the id of the select box
$("#selectList option:eq(3)").text()

How about getting all elements but the first and last one in a select box?

//#selectbox is the id of the select box
$("#selectList option:not(option:first, option:last)").each(function(){
$(this).text();
});

Get Multiple Selected Value/Text In jQuery Select Box

Now we want to try to retrieve multiple selected values, we can do it easily with the following code.

        jQuery('#some_element:selected').each(function(){
                alert(jQuery(this).text());
                alert(jQuery(this).val());
        });

How about storing these values?

        var current = [];
        jQuery('#some_element:selected').each(function(index, selectedObj){
                current[index] = $(selectedObj).text();
        });

This way we eliminate the additional index needed to follow through the loop! How about shorten the cold a bit?

var foo = jQuery('#multiple :selected').map(function(){return jQuery(this).val();}).get();

This way we eliminate the need to create an array.

Remove Element In Select Box With jQuery

So we can get and add element into the select box. How about remove them? Basically, you will need to use one of the get element method describe above before applying the remove instruction.

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();

Select an option in the select box with jQuery

If you want to select an option in the select box, you can do this.

jQuery('#selectbox option[value="something"]').attr('selected', 'selected');

all option will be selected in this case.

UnSelect an option in the select box with jQuery

If you want to unselect an option in the select box, you can do this.

jQuery('#selectbox option[value="something"]').attr('selected', false);

all option will be unselected n this case.

OnChange find selected option from the select box

onchange find select box selected item.

$('#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());
        }
});

Summary

There are definitely other tricks to manipulate select box. The above are just some of it.

 

Like this post? Share it!

digg 48 Tutorial: jQuery Select Box Manipulation Without Plugin reddit 48 Tutorial: jQuery Select Box Manipulation Without Plugin stumbleupon 48 Tutorial: jQuery Select Box Manipulation Without Plugin delicious 48 Tutorial: jQuery Select Box Manipulation Without Plugin furl 48 Tutorial: jQuery Select Box Manipulation Without Plugin technorati 48 Tutorial: jQuery Select Box Manipulation Without Plugin google 48 Tutorial: jQuery Select Box Manipulation Without Plugin myspace 48 Tutorial: jQuery Select Box Manipulation Without Plugin facebook 48 Tutorial: jQuery Select Box Manipulation Without Plugin twitter 48 Tutorial: jQuery Select Box Manipulation Without Plugin
share save 171 16 Tutorial: jQuery Select Box Manipulation Without Plugin

No related posts.

About Clay

I am Clay who is the main writer for this website. I own a small web hosting company in Malaysia and i'm available to be hired as individual contractor on elance or odesk. You can find me on twitter.
This entry was posted in How-to, jQuery and tagged . Bookmark the permalink.

4 Responses to Tutorial: jQuery Select Box Manipulation Without Plugin

  1. where is the same of this code? why on God’s green earth would you ever post code only without a sample? Are you an idiot?

  2. Clay says:

    Hey smart Paul! What kind of sample do you expect to see when the code above specific clearly the way to manipulate a select box with jQuery. I believe with your high level of intelligence you will surely be able to figure such a simple code as described in this article :D

    Clay

  3. Pingback: 網站製作學習誌 » [Web] 連結分享

  4. David Richards says:

    Nice Example,

    Paul, your an idiot!!!