Jquery – Search the options of a select, find the value, add selected to it and write it’s html text on a div

jquery

I have a simple select, a div and a prepopulate variable.

Here is what I want to do:

I have the prepopulate value, lets say:

prepop = 2;

I want to search all the options in the select, add the attribute selected to the option with value 2 and write "Val two" on the div test:

<div id="test"></div>

<select>
<option value="1">Val one<option>
<option value="2">Val two</option>
</select>

Any ideas how?

Here are my thoughts:

var $options = "get all the select options";
    $options.each(function(){
        if (jQuery(this).val() == prepop){
            jQuery('#test').html(jQuery(this).text());
        }
    });
}

Best Answer

I think this should do the trick:

$(document).ready(function() {
    var prepop = 2;
    $('select').find('option').each(function() {
        if($(this).val() == prepop) {
            $('#test').html($(this).text());
        }
    });
});

So what's happening here, is we are looping through all the "options" found underneath the "select". If the value of the currently being looped through "option" is equal to the pre population variable, we populate the div with the appropriate content.

Related Topic