Setting option in select dropdown based on data-attribute

Question

I have a select dropdown containing a list of countries looking something like this:

<select name="countryCode" id="countryCode">
<option data-countryCode="GB" value="44" Selected>UK (+44)</option>
<option data-countryCode="US" value="1">USA (+1)</option>
<optgroup label="Other countries">
    <option data-countryCode="DZ" value="213">Algeria (+213)</option>
    <option data-countryCode="AD" value="376">Andorra (+376)</option>
</optgroup>
</select>

I then look up the user's country using ipinfo.io and would like to set the selected option based on the returned country and the data-countryCode attribute. I have tried some different approaches, but I simply cannot get it to work.

I have created a jsfiddle with the country-selector and the lookup: http://jsfiddle.net/E7fBk/

How do I set the drop-down to show the user's country ?

thanks

Thomas

Arun P Johny · Accepted Answer · 2013-11-04 16:40:02Z

6

Try

$(function () {
    $.get("http://ipinfo.io", function (response) {
        $('#countryCode option[data-countryCode="' + response.country + '"]').prop('selected', true)
    }, "jsonp");
});

Demo: Fiddle

answered Nov 4, 2013 at 16:40

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tushar Gupta - curioustushar · Accepted Answer · 2013-11-04 16:40:09Z

2

Fiddle DEMO

$(function () {
    $.get("http://ipinfo.io", function (response) {
        $('#countryCode option[data-countryCode="' + response.country + '"]').prop('selected', true)
    }, "jsonp");
});

or

Fiddle DEMO

$(function () {
    $.get("http://ipinfo.io", function (response) {
        $('#countryCode').val($('#countryCode [data-countryCode="' + response.country + '"]').val());
    }, "jsonp");
});

answered Nov 4, 2013 at 16:40

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

Collectives™ on Stack Overflow

Setting option in select dropdown based on data-attribute

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related