Динамически изменить страну в зависимости от местоположения с помощью jQuery? - PullRequest
Новая
       3

Динамически изменить страну в зависимости от местоположения с помощью jQuery?

0 голосов
/ 29 июня 2011

У меня есть выпадающий список стран и кодов стран. Список довольно большой, поэтому я хотел динамически ставить страну посетителя наверх после загрузки страницы. Есть ли способ сделать это в 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 Ответ

1 голос
/ 29 июня 2011

Код ниже в основном делает следующее:

  1. Вызовите API местоположения, который поддерживает jsonp (т.е. ???)
  2. В случае успеха найдите элемент option с соответствующим значением
  3. Переместите его наверх, добавив к выбору
  4. Изменить текст опции 'blank' на '----'

Понятия не имею, точна ли используемая служба определения местоположения или какова ее политика использования. Вы также должны кешировать значение на некоторое время, чтобы предотвратить чрезмерные вызовы 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>
...