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。这样更有效。

其余的代码都很好

根据另一个选择更改选择选项

1 个答案: