Динамическое заполнение опции выбора с помощью jquery - PullRequest
11 голосов
/ 11 ноября 2011

Будет два раскрывающихся списка:

Первый содержит список поставщиков мобильных устройств, а второй - список моделей для каждого поставщика.

Когда выбирается поставщик из первого выпадающего списка, второй выпадающий список должен динамически заполняться соответствующей моделью для этого поставщика. Это для мобильного веб-сайта, лучше использовать jquery-mobile

Значения параметров для второго будут на карте json.

  <select class="mobile-vendor">
    <option value="motorola">Motorola</option>
    <option value="nokia">Nokia</option>
    <option value="android">Android</option>
  </select>

 selectValues = {"nokia"   : {"N97":"download-link", 
                              "N93":"download-link"}, 
                 "motorola": {"M1":"download-link",
                              "M2":"download-link"}}

<select class="model">
    <option></option>
</select>

Например, если пользователь выбирает nokia в первом раскрывающемся списке, во втором раскрывающемся списке должны быть указаны параметры N97, N93.

1 Ответ

20 голосов
/ 11 ноября 2011

РЕДАКТИРОВАТЬ: Новый JavaScript, чтобы принять во внимание вашу обновленную структуру JSON:

$(function() {
    var selectValues = {
        "nokia": {
            "N97": "http://www.google.com",
            "N93": "http://www.stackoverflow.com"
        },
        "motorola": {
            "M1": "http://www.ebay.com",
            "M2": "http://www.twitter.com"
        }
    };

    var $vendor = $('select.mobile-vendor');
    var $model = $('select.model');
    $vendor.change(function() {
        $model.empty().append(function() {
            var output = '';
            $.each(selectValues[$vendor.val()], function(key, value) {
                output += '<option>' + key + '</option>';
            });
            return output;
        });
    }).change();

    // bonus: how to access the download link
    $model.change(function() {
        $('#download-link').attr('href', selectValues[$vendor.val()][$model.val()]).show();
    });
});

Рабочий пример доступен в jsFiddle .

Обратите внимание, что это должно работать с jQuery mobile просто отлично.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...