通过jQuery根据位置动态重新排列国家下拉列表？
Posted
技术标签:
【中文标题】通过jQuery根据位置动态重新排列国家下拉列表？【英文标题】：Dynamically rearrange country drop down based on location via 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>
对此有何建议或技巧？
【问题讨论】：
您使用哪种服务器端语言？您可能可以在服务器端进行。 【参考方案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>
【讨论】：
以上是关于通过jQuery根据位置动态重新排列国家下拉列表？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 jquery 选择的下拉列表中按字母顺序重新排序 <options>