Unable to set select selected value using jquery

Question

Here is my html code

<select id="ddlCountry" placeholder="optional" class="select" title="Select Country"> <option value="0">Select Country</option> </select>

Here is the jquery code.....

$(document).ready(function () { $('select.select').each(function () { var title = $(this).attr('title'); if ($('option:selected', this).val() != '') { title = $('option:selected', this).text(); $(this) .css({ 'z-index': 10, 'opacity': 0, '-khtml-appearance': 'none' }) .after('<span class="select">' + title + '</span>') .change(function () { val = $('option:selected', this).text(); $(this).next().text(val); }) } }); var country = [{ "CountryID": 1, "CountryName": "Afghanistan" }, { "CountryID": 2, "CountryName": "Albania" }, { "CountryID": 3, "CountryName": "Algeria" }, { "CountryID": 4, "CountryName": "American Samoa" }, { "CountryID": 5, "CountryName": "Andorra" }, { "CountryID": 6, "CountryName": "Angola" }, { "CountryID": 7, "CountryName": "Anguilla" }, { "CountryID": 8, "CountryName": "Antarctica" }, { "CountryID": 9, "CountryName": "Antigua and Barbuda" }, { "CountryID": 10, "CountryName": "Argentina" }]; $.each(country, function (index, item) { $('#ddlCountry').append($('<option></option>').val(item.CountryID).html(item.CountryName)); }); $('#ddlCountry').val(2); });

i have set the drop down value as 2 in ready but the default value is always the Select Country

Here is the jsfiddle

What is the question?

Jai
– Jai

2013-09-25 08:18:48 +00:00
Commented Sep 25, 2013 at 8:18 — Jai
– Jai, Commented Sep 25, 2013 at 8:18
just posted an answer.

Jai
– Jai

2013-09-25 08:27:30 +00:00
Commented Sep 25, 2013 at 8:27 — Jai
– Jai, Commented Sep 25, 2013 at 8:27

A. Wolff · Accepted Answer · 2013-09-25 08:26:38Z

You are not firing onchange event when programmatically changing selected value of the select. Trigger it manually:

$('#ddlCountry').val(2).change();

DEMO

Khushi · Accepted Answer · 2013-09-25 08:26:08Z

1

Try this

$("#ddlCountry")[0].selectedIndex = 2;

instead of

$('#ddlCountry').val(2);

answered Sep 25, 2013 at 8:26

Khushi

1,0514 gold badges24 silver badges48 bronze badges

Comments

Jai · Accepted Answer · 2013-09-25 08:26:41Z

You can put the .each function below that line where you are setting the value to 2 this way:

 $('#ddlCountry').val(2); //<---below this one $('select.select').each(function () { var title = $(this).attr('title'); if ($('option:selected', this).val() != '') { title = $('option:selected', this).text(); $(this) .css({ 'z-index': 10, 'opacity': 0, '-khtml-appearance': 'none' }) .after('<span class="select">' + title + '</span>') .change(function () { val = $('option:selected', this).text(); $(this).next().text(val); }) } });

checkout here in this fiddle

LeGEC · Accepted Answer · 2013-09-25 08:27:41Z

Setting the value does not trigger the change event.

You can add :

$('#ddlCountry').val(2).trigger('change');

Collectives™ on Stack Overflow

Unable to set select selected value using jquery

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related