Изменить параметры выбора в зависимости от другого выбора

Question

У меня есть два выбора, и второй должен изменить свои значения в зависимости от выбранного значения в первом

У меня есть что-то вроде этого, но это не работает:

var lookup = {
       'Option 1': ['Option 1 - Choice 1', 'Option 1 - Choice 2', 'Option 1 - Choice 3'],
       'Option 2': ['Option 2 - Choice 1', 'Option 2 - Choice 2'],
       'Option 3': ['Option 3 - Choice 1'],
    };
    
$('#options').on('change', function() {
       
       var selectValue = $(this).val();
    
       $('#choices').empty();
       
       for (i = 0; i < lookup[selectValue].length; i++) {
          
          $('#choices').append("<option value='" + lookup[selectValue][i] + "'>" + lookup[selectValue][i] + "</option>");
       }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="options">
    <option value="" disabled selected>Select an option</option>
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
    <option value="Option 3">Option 3</option>
</select>

<select id="choices">
    <option value="" disabled selected>Please select an option</option>
</select>

Answer 1

Мне кажется, ваш код работает нормально. Так что, возможно, вы js каким-то образом не выполняете или jQuery не загружается должным образом, вы пробовали войти в консоль в событии onChange?

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

$("#options").on("change", function () {
  var selectValue = $(this).val();
  var options = lookup[selectValue].map(
    (v) => `<option value="${v}">${v}</option>`
  );
  
  $("#choices").html(options.join("\n"));
});

Обратите внимание, что вместо добавления каждого элемента мы подготавливаем строку, а затем манипулируем DOM только один раз в конце. Это более эффективно.

Остальная часть вашего кода в порядке