Выбор выпадающего значения на основе данных JSON

#javascript #jquery #json

Вопрос:

Я пытаюсь создать простой плагин jquery, который запрашивает систему геолокации и возвращает данные о том, где находится IP-адрес пользователя, предварительно выбрав его в форме HTML.

У меня есть HTML select со всеми кодами стран в качестве значений. Мне нужно выбрать тот, на который ссылается возвращаемые данные. Это то, что у меня есть на данный момент…

 (function($){

    $.fn.geoselect = function() {

        $.getJSON('http://www.geoplugin.net/json.gp?jsoncallback=?', function(data) {
            this.attr("selected", "selected");
        });

    };

})(jQuery);

Очевидно, что в настоящее время это не будет работать, поскольку «это» относится к выбору в целом, а не к одному из его вариантов. Например, если возвращаемые данные равны ‘ГБ’, мне нужно выбрать опцию со значением ‘ГБ’.

1. Можете ли вы опубликовать пример вашего объекта json, чтобы выяснить структуру?

2. Этот URL-адрес на самом деле является действующим сервисом, поэтому вы должны увидеть реальный пример. Из этих данных выбирается значение «geoplugin_countryCode», например: «GB»

3.geoplugin.net/json.gp?jsoncallback =?

Ответ №1:

Вместо this.attr("selected", "selected"); этого:

 var selectedData = 'GB' // assuming you extracted it from JSON data already

$("option[value='"   selectedData   "']", $(this)).attr("selected", "selected"); // Assuming that "this" is a reference to your picklist.

1. Хм, ошибок нет, но, похоже, это не работает… Я настраиваю пример на jsfiddle. jsfiddle.net/sru59

2. @Plasticated. Я проверил ваш jsfiddle. Причина, по которой оно не выбрано, заключается в том, что атрибут value каждого элемента option в select имеет нижний регистр. Просто сделайте это: $(«option[value='» data.geoplugin_countryCode.toLowerCase() «‘]», $( это)).attr(«выбранный», «выделенный»);

Ответ №2:

Вы находитесь внутри $.getJSON, поэтому this он не будет ссылаться на ваш выбор. Вместо этого сохраните его в переменной в родительской области видимости, а затем получите к нему доступ при обратном вызове. Затем вы можете использовать .find() метод для получения определенного <option> тега.

Я также собираюсь предположить, что данные, которые вы получаете обратно из API, являются data['geoplugin_city']

 $.fn.geoselect = function() {
    var dropdown = this;

    $.getJSON('http://www.geoplugin.net/json.gp?jsoncallback=?', function(data) {
        $(dropdown).find('option[value="'   data['geoplugin_city']   '"]').attr("selected", "selected");
    });
};