Question

我想有2个选择。作为一个例子，第一个选择是

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

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

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

当我点击选项2时，我希望有这个选项

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

Answer 1

只需构建您的数据：

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>

Answer 2

你想要吗？

＆＃13;

$(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>");
    }
}

＆＃13;

<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>

＆＃13;

Answer 3

袖手旁观，我说你最好的选择是使用optgroups。这是一个有点旧的学校，但如果你使用下拉选择列表，这是最简单的方法。如果您想避免简单，那么为每个选项添加一个类，为主组添加一个数据属性。主要字段类似于“主”类，数据属性类似于'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

你甚至可以这样做：

$('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>

自定义JQuery选择

4 个答案: