Как сделать так, чтобы значение одного поля выбора управляло параметрами второго поля выбора

Question

Я хочу сделать HTML-форму с 2 полями выбора. Выбранный параметр в первом поле выбора должен отображать параметры во втором окне выбора. Я хотел бы решить это динамически на клиенте (используя javascript или jQuery), а не отправлять данные на сервер.

Например, допустим, у меня есть следующие категории меню и Элементы меню :

• Бутерброды
  • Турция
  • Ham
  • Бэкон
• Стороны
  • Mac 'n Cheese
  • Картофельное пюре
• Напитки
  • Кока-Кола
  • Sprite
  • Sweetwater 420

У меня будет два select бокса с именами Menu Category и Items соответственно. Когда пользователь выбирает Sandwiches в поле Menu Category, параметры в поле Items будут отображать только параметры сэндвича.

Чтобы сделать это более сложным, давайте предположим, что я не знаю, что такое пункты меню или категории, пока не буду готов отправить страницу клиенту. Мне понадобится какой-нибудь способ «связать» данные для двух списков выбора, но я не знаю, как это будет сделано.

Я застрял, как я мог бы подойти к этому. Как только я отфильтрую 2-й список один раз, как мне «найти» параметры списка, когда я изменю свою категорию меню в 1-м списке? Кроме того, если я думаю о SQL, у меня будет ключ в 1-м блоке, который будет использоваться для ссылки на данные во 2-м блоке. Однако я не вижу, где у меня есть место для «ключевого» элемента во втором блоке.

Как можно решить эту проблему с помощью комбинации jQuery или простого javascript?

Answer 1

Посмотрите этот пример на Dynamic Drive , или вы можете найти в Google " цепочка, выберите " для других примеров.

Редактировать: И вот очень хороший учебник Реми Шарпа: Автоматическое заполнение полей выбора с помощью jQuery & AJAX

---

Ну, потому что у меня есть ОКР, я собрал для вас демо 1013 *.

Определяет, что переменная также может быть загружена как json, если требуется.

HTML

<select id="cat"></select> <select id="items" disabled></select>

Сценарий

$(document).ready(function(){

var menulist = { "categories" : [{
 "category" : "Sandwiches",
 "items" : [
   {"name": "Turkey"},
   {"name": "Ham"},
   {"name": "Bacon"}
  ]
 },{
 "category" : "Sides",
 "items" : [
   {"name": "Mac 'n Cheese"},
   {"name": "Mashed Potatoes"}
  ]
 },{
 "category" : "Drinks",
 "items" : [
   {"name": "Coca Cola"},
   {"name": "Sprite"},
   {"name": "Sweetwater 420"}
  ]
 }]
};

var i,c = '<option>Select a category</option>', opt = $('<option/>');
var menu = menulist.categories;

for (i=0; i < menu.length; i++){
 c += '<option>' + menu[i].category + '</options>';
}
$('#cat')
 .html(c)
 .change(function(){
  var indx = this.selectedIndex - 1;
  if (indx < 0) {
   $('#items').empty().attr('disabled','disabled');
   return;
  }
  var item = '<option>Select an item</option>';
  for (i=0; i < menu[indx].items.length; i++){
    item += '<option>' + menu[indx].items[i].name + '</options>';
  }
  $('#items').html(item).removeAttr('disabled');
 });

});

Answer 2

Вы можете сделать простой JavaScript. Если это все, что вам нужно для JavaScript, то JQuery, вероятно, слишком много.

создать функцию, которая заполняет второе поле со списком. В первом поле со списком вы вызываете эту функцию с помощью onChange = theFunctionYouCreated ()

надеюсь, этого достаточно, чтобы начать.