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

Скажем, у меня есть два спуска, которые заполняются, когда мои 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-код, который использует методы обратного вызова DB. в моем сценарии у меня есть что-то вроде этого.

• Сообщение ajax в laravel 5 возвращает ошибку 500 (Внутренняя ошибка сервера)
• Живое обновление данных MySQL
• Загрузите php-контент с помощью jQuery AJAX
• Как использовать ajax для отображения php в модальном всплытии
• не может нажимать элементы, отобранные другой страницей, используя ajax - $ (document) .on не работает

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

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

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

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

  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>'); });