Question

我有两个<select>，第一个<select>有一堆<option>，但第二个<select>没有。我希望第一个<option>中的每个<select>在第二个<select>中添加不同的选项，最好使用JavaScript / jQuery。

e.g。

<select id="firstSelect">
    <option val="1">1</option>
    <option val="2">2</option>
    <option val="3">3</option>
</select>

<select id="addOptions">
<!--Add stuff here!-->
</select>

上面的代码会发生什么，选择选项1会将选项A，B和C添加到#adoptions，而选项2会将选项D和E添加到#adoptions，选项3会将选项F，G，H和I添加到#adoptions。

编辑：我试过这个：

function dropdownChecker() {
switch($('select#weapon').val()) {
    case "1":
        $("#dropSpace").append('<option>My option</option>');
        break;
    case "2":
        $("#dropSpace".append('<option>Second Option</option>'))
        break;
}
$(document).ready(dropdownChecker());

Answer 1

您需要创建要在第二个array中插入的select个选项。在此之后，根据第一个下拉列表中的值选择，您必须使用以下小代码在第二个下拉列表中创建和填充选项：

$.each(optionsArray, function(key, value) {
  $('#addOptions')
    .append($("<option></option>")
      .attr("value", value)
      .text(value));
});

以下是完整的示例：

$("#firstSelect").on('change', function() {
  var optionsArray = '';
  switch ($(this).val()) {
    case "1":
      optionsArray = ['A', 'B', 'C'];
      break;
    case "2":
      optionsArray = ['D', 'E'];
      break;
    case "3":
      optionsArray = ['F', 'G', 'H', 'I'];
      break;
  }
  $('#addOptions').empty();
  $.each(optionsArray, function(key, value) {
    $('#addOptions')
      .append($("<option></option>")
        .attr("value", value)
        .text(value));
  });
});

$(document).ready(function() {
  $("#firstSelect").trigger('change');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="firstSelect">
    <option val="1">1</option>
    <option val="2">2</option>
    <option val="3">3</option>
</select>

<select id="addOptions">
<!--Add stuff here!-->
</select>

select中的特定选项会在下一个选择中添加选项

1 个答案: