Я внедряю систему в эти дни, я хочу реализовать процесс выбора combo box, но я не знаю, как его реализовать, поэтому попросите вас, ребята, одобрить?
мой сценарий – это, скажем, у нас есть два списка выбора списков со списком, один и один справа, один из них один, а правый – дочерний.
когда я выбираю элемент из левого комбинированного поля, содержимое правой группы со списком должно быть изменено в соответствии с выбором левой,
Пример: подумаем о мобильных телефонах, если я выберу бренд
Nokia
из левого поля со списком правого комбинированного поля следует изменить на
C6-01 E7-00 5232 X3-02 C1-01 C7-00 5228 C5-03 5250 6120ci E5-00 E73
как мудрый. пожалуйста, помогите мне реализовать такой сценарий! любые ссылки на учебники, примеры кода для понимания сценария лучше!
привет, Рангана
Трюк заключается в том, чтобы подписаться на событие изменения и соответственно изменить содержимое второго блока.
HTML:
<select id="brand"> <option value="">- select -</option> <option value="nokia">Nokia</option> <option value="apple">Apple</option> </select> <select id="type"></select>
JavaScript (готово):
var selectBrand = $("#brand"); var selectType = $("#type"); var optionsList = { nokia: [ "C6-01", "E7-00" ], apple: [ "iPhone 3", "iPhone 3G", "iPhone 4" ] }; selectBrand.change(function() { var brand = selectBrand.val(); var options = optionsList[brand]; var html; if (options) { html = '<option value="">- select -</option>'; $.each(options, function(index, value) { html += '<option value="' + value + '">' + value + '</option>'; }); } else { html = '<option value="">Select a brand</option>'; } selectType.html(html); }).change();
Полный пример: см. http://www.jsfiddle.net/TJJ8f/
Это работает, имея две вещи. Во-первых, сервер, который вернет JSON для нужной вам категории и, во-вторых, код для интерфейса.
<?php // Do what you need to $modelsArray = getModelsForBrand($_REQUEST['brand']); echo json_encode($modelsArray); ?>
Это использует функцию json_encode, чтобы получить JSON в массиве, возвращаемом тем, что вы используете для получения моделей. Я не использовал эту функцию сам, но это выглядит довольно просто.
Тогда ваш jQuery будет выглядеть так:
$("#brandCombo").change(function(){ var chosenBrand = $(this).val(); // Get the value $.getJSON('/your-php-file.php', { "brand" : chosenBrand }, function(request){ // Successful return from your PHP file $("#modelCombo").empty(); // For each item returned, add it to your models combo box $.each(request, function(i,item){ $("#modelCombo").append("<option value='" + item.value + "'>"+ item.name + "</option>"); }); }); });
В этом примере brandCombo – это идентификатор списка с марками, а modelCombo – это идентификатор списка, который должны отображаться в моделях. Когда значение brandCombo изменяется, оно делает запрос к вашему файлу PHP для получения массива моделей в JSON. Затем он проходит каждый из них и добавляет новый вариант в ваш список modelCombo .
Аналогичный вопрос, на который я ответил , здесь , где я упомянул, как это сделать, со всеми данными, уже находящимися на странице и в списках (их скрытие / показ) или с помощью запросов AJAX (в качестве примера выше).
Другой вариант, как показано в ответе Дайва, состоит в том, чтобы иметь всю необходимую информацию на странице уже в виде объекта JavaScript. Если вы захотите это сделать, тогда функция PHP json_encode все равно может быть полезной (хотя вы просто вызываете ее один раз со всеми вашими данными и набрасываете ее на страницу).
Ряд предыдущих сообщений SO охватывает эту тему, посмотрите на это, например: Использование javascript и jquery для заполнения связанных ящиков с помощью структуры массива