通过jQuery根据位置动态重新排列国家下拉列表？答案

【问题标题】：Dynamically rearrange country drop down based on location via jQuery?通过jQuery根据位置动态重新排列国家下拉列表？
【发布时间】：2011-06-28 22:18:37
【问题描述】：

我有一个包含国家和国家代码的下拉菜单。这个列表非常大，所以我想在页面加载后动态地将访问者的国家放在顶部。有没有办法在 jQuery（GeoIP？）中做到这一点？

我的下拉菜单如下所示：

<select name="country" id="country" class="inputCombo">
    <option value="">Select an item...</option>
    <option value="AF">Afghanistan</option>
    <option value="AL">Albania</option>
    <option value="DZ">Algeria</option>
    ....
    <option value="GB">United Kingdom</option>
    <option value="US">United States</option>
</select>

如果你在美国，那么我希望它像这样重新排列：

<select name="country" id="country" class="inputCombo">
    <option value="US">United States</option>
    <option value="">--------------</option>
    <option value="AF">Afghanistan</option>
    <option value="AL">Albania</option>
    <option value="DZ">Algeria</option>
    ....
    <option value="GB">United Kingdom</option>
</select>

或者如果在加拿大，像这样：

 <select name="country" id="country" class="inputCombo">
        <option value="CA">Canada</option>
        <option value="">--------------</option>
        <option value="AF">Afghanistan</option>
        <option value="AL">Albania</option>
        <option value="DZ">Algeria</option>
        ....
        <option value="GB">United Kingdom</option>
        <option value="US">United States</option>
    </select>

对此有何建议或技巧？

【问题讨论】：

您使用哪种服务器端语言？您可能可以在服务器端进行。

标签： javascript jquery geolocation

【解决方案1】：

下面的代码基本上做了以下事情：

调用支持jsonp的定位api（即???）
成功后，找到具有匹配值的选项元素
通过预先选择将其移至顶部
将“空白”选项的文本更改为“----”

我不知道所使用的定位服务是否准确，也不知道它的使用政策是什么。您还应该将值缓存一段时间以防止过多的 api 调用。此外，此代码不会检查它是否可以找到具有匹配国家代码的选项。您应该在重写“空白”选项之前检查一下（或忘记重写它）

http://jsfiddle.net/rob_cowie/uZLNM/ 的工作示例

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <div id="container">
    <select name="country" id="country" class="inputCombo">
        <option value="">Select an item...</option>
        <option value="AF">Afghanistan</option>
        <option value="AL">Albania</option>
        <option value="DZ">Algeria</option>
        <option value="GB">United Kingdom</option>
        <option value="US">United States</option>
    </select>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  <script>
    var url = 'http://www.geoplugin.net/json.gp?jsoncallback=?';

    $(document).ready(function() {
        $.getJSON(url)
            .success(function(data){
                var country_code = data.geoplugin_countryCode;
                var $country = $('#country');
                $country.find('option[value="'+country_code+'"]').prependTo($country);
                $country.find('option[value=""]').text('--------------');
                $country.val(country_code);
            });
    });
  </script>

</body>
</html>

【讨论】：