自定义 JQuery 选择 [重复]

Question

我想要 2 个选项。例如，第一个选择是

<select>
    <option>IT</option>
    <option>Management</option>
</select>

当我点击 IT 时，我希望在第二个选项中有此选项

<option>Programmer</option>
<option>Technician</option>

当我点击选项 2 时，我想要这个选项

<option>Sales</option>
<option>Marketing</option>

Answer 1

你甚至可以这样做：

$('select#three').hide();
$('select#one').on('change',function(){
   if($(this).val()=='IT'){
     $('select#two').show();
     $('select#three').hide();
   } else if($(this).val()=='Management'){
     $('select#two').hide();
     $('select#three').show();
     }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="one">
    <option>IT</option>
    <option>Management</option>
</select>
<select id="two">
<option>Programmer</option>
<option>Technician</option>
</select>
<select id="three">
<option>Sales</option>
<option>Marketing</option>
</select>

Answer 2

你想要吗？

$(document).ready(function() {
  $("#sel1").change(function() {
    var val = $(this).find("option:selected").text();
    AppendNew(val);
  });
  var firstSelected = $("#sel1").find("option").first().text();
  AppendNew(firstSelected);
});

function AppendNew(val) {
  $("#sel2").find("option").remove();
    if (val == "IT") {
      $("#sel2").append("<option>Programmer</option>");
      $("#sel2").append("<option>Technician</option>");
    } else if (val == "Management") {
      $("#sel2").append("<option>Sales</option>");
      $("#sel2").append("<option>Marketing</option>");
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="sel1">
    <option>IT</option>
    <option>Management</option>
</select>

<select id="sel2">
</select>

Answer 3

马上，我想说你最好的选择是使用 optgroups。这有点老派，但如果您使用下拉选择列表，这是最简单的方法。如果您想避免简单性，请为每个选项添加一个类，并为主要组添加一个数据属性。主要字段类似于“main”类，数据属性类似于“data-group="it"' 和 'data-group="management"'。

所以你的代码应该是这样的：

$(document).ready(function() {
  $(".sub").hide();
  
  $("#category").on('change',function() {
    if ($(this).hasClass('main')) {
       
       // first hide all subs
       $(".sub").hide();
      
       // now get the data-group and show all of it's subs
       var group = $('#category option:selected').attr('data-group');
       $('.'+group).show();
       
    }
  });
});

<select id="category">
  <option class="main" data-group="it">IT</option>
  <option class="sub it">Programming</option>
  <option class="sub it">Networking</option>
  <option class="main" data-group="management">Management</option>
  <option class="sub management">Pushing Paper</option>
  <option class="sub management">Sharpening Pencils</option>
</select>

Answer 4

只需像这样构建您的数据：

var options = {
    "IT": ['Programmer', 'Technician'],
    "Management": ['Sales', 'Marketing']
};

..然后监听change事件并相应修改目标select元素。

在这种情况下，目标选择元素的子option 元素被删除。接下来，您将遍历所选对象的属性 options[this.value] 并附加 option 元素：

Example Here

$('#choices').on('change', function () {
    $('#dependent-select').empty();
    options[this.value].forEach(function (value, index) {
        $('#dependent-select').append($("<option />").val(value).text(value));
    });
});

var options = {
    "IT": ['Programmer', 'Technician'],
    "Management": ['Sales', 'Marketing']
};

$('#choices').on('change', function () {
    $('#dependent-select').empty();
    options[this.value].forEach(function (value, index) {
        $('#dependent-select').append($("<option />").val(value).text(value));
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="choices">
    <option>IT</option>
    <option>Management</option>
</select>
<select id="dependent-select">
</select>