How to select dropdown list using jQuery

Question

I have the dropdown below. I want to populate orange in the dropdown when the page loads. I made a function, PopulateDropDown, which runs the jQuery code to do so, but it is not working.

<select name="cboFruits" id="cboFruits">
    <option value="Apple">Apple</option>
    <option value="Orange">Orange</option>
    <option value="Mango">Mango</option>
    <option value="Banana">Banana</option>
    <option value="Pine">Pine</option>
</select>

<script type="text/javascript" src ="jquery.js"></script>
<script>
    function PopulateDropDown(pFruitName)
    {
        $('cboFruits :selected').val(pFruitName);
    }

    $(document).ready(function(){
        PopulateDropDown('Orange');
    });
</script>

score 1 · Answer 1 · edited May 23 '17 at 11:45

Well, there are a few problems with your code:

 $('cboFruits :selected').val(pFruitName);

First of all, you're missing the # in front of cboFruits, since cboFruits is the ID property of your select list.

Also the correct way of setting the selected option would be something like this:

function PopulateDropDown(pFruitName)
{
    $('#cboFruits option:contains("'+pFruitName+'")').prop('selected', true);
}

$(document).ready(function(){   
    PopulateDropDown('Orange');
});

Ref this question How do you select a particular option in a SELECT element in jQuery?

score 0 · Answer 2 · answered Jul 31 '12 at 08:27

0

It should work:

function PopulateDropDown(pFruitName)
{
    $('#cboFruits').val(pFruitName);
}

answered Jul 31 '12 at 08:27

Mikhail Payson

923
8
12

mrsrinivas · Accepted Answer · 2012-07-31T08:48:47.117

0

You forgot to write ** # ** and remove selected

$('#cboFruits').val(pFruitName);

EDIT :

or you use

<option value="Orange" selected="true">Orange</option>

when page by default 'Orange' will be selected

edited Jul 31 '12 at 08:48

answered Jul 31 '12 at 08:38

mrsrinivas

34,112
13
125
125

How to select dropdown list using jQuery

3 Answers3