Как заполнить второй раскрывающийся список, используя выбранное значение в первом раскрывающемся списке?

Question

Скажем, у меня есть два раскрывающихся списка, которые заполняются при загрузке моего jsp

 <select id="Group" name="group"> -- first drop down
    <option value="0001">1</option>
    <option value="0002">2</option>
 </select>

 <select id="subGroup" name="class"> -- second drop down
    <option value="0001-000">A</option> -- sub group associated with option value 001
    <option value="0001-010">B</option>
    <option value="0001-020">C</option>
    <option value="0001-030">D</option>
    <option value="0001-040">E/option>
    <option value="0002-000">F</option> -- sub group associated with option value 002
    <option value="0002-010">G</option>
    <option value="0002-020">H</option>
    <option value="0002-040">I</option>
  </select>

Теперь мне нужно отфильтровать второй выпадающий список на основе выбранного значения в первом выпадающем списке. Я не могу использовать код PHP, который использует методы обратного вызова БД. в моем сценарии у меня есть что-то вроде этого.

   $("#Group").change(function() {
     var groupVal = $(this).find("option:selected").val();
     $('#subGroup option').filter(function( {return!$(this).val().indexOf(groupVal)!=-1);}).remove();
    });

скрипт работает нормально, он удаляет все параметры, кроме выбранного. но моя проблема в том, что в следующий раз, когда я выберу другое значение в первом раскрывающемся списке, второе раскрывающееся меню станет пустым. Я даже работал с Hide / Show, но думаю, что они не будут работать с <select> :(

Есть ли способ, которым я могу заполнить второй раскрывающийся список, когда я выбрал какой-либо другой параметр в первом раскрывающемся списке?

Answer 1

Если вы удаляете элементы, вы не получаете их обратно. Используйте hide() и show(), как вы сами предложили:

$("#Group").change(function() {
    var groupVal = $(this).find("option:selected").val();
    $('#subGroup option').hide();
    $('#subGroup option[value^='+groupVal+']').show();
});

Другими словами, каждый раз при изменении поля выбора #Group скрыть все параметры в #subGroup и показывать только те, чей атрибут value начинается с groupVal.

Answer 2

Есть также связанный плагин выбора коробки от Remy sharp, с которым я добился успеха, если вы хотите попробовать:

http://remysharp.com/2007/09/18/auto-populate-multiple-select-boxes/

Answer 3

Для того, чтобы сделать это, вам нужно где-то сохранить все доступные опции, а затем снова заполнить их этим набором данных. например

 var availableOptions = {
    'groupOne': {/* options as {value: '', text: ''} */},
    'groupTwo': {/* options as {value: '', text: ''} */}
  };

  $("#Group").change(function() { 
    var groupVal = $(this).find("option:selected").val(); 
    var sub = $('#Subgroup');
    $.each(availableOptions[groupVal], function(i, data){
      sub.append('<option value="'+data+'">'+data.text+'</option>');
  });

Answer 4

Сохраните все параметры для второго поля выбора в массив при загрузке страницы. Затем заполните поле выбора из этого массива при изменении. Вы удаляете второй «пакет» опций, чтобы они больше не существовали в следующий раз, когда вы захотите их использовать.