javascript - 根据数据属性在选择下拉列表中设置选项

Question

我有一个选择下拉列表，其中包含一个看起来像这样的国家列表：

<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>

然后，我使用 ipinfo.io 查找用户所在的国家/地区，并希望根据返回的国家/地区和 data-countryCode 属性设置所选选项。我尝试了一些不同的方法，但我根本无法让它发挥作用。

我用国家选择器和查找创建了一个 jsfiddle：http: //jsfiddle.net/E7fBk/

如何设置下拉菜单以显示用户所在的国家/地区？

谢谢

托马斯

Answer 1

尝试

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

演示：小提琴

Answer 2

小提琴演示

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

或者

小提琴演示

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