Question

如何在选择第一个菜单后动态显示第二个选择菜单的两个选择菜单

我需要创建一个包含两个选择菜单的表单。

一个来源和另一个目的地。

当我从第一个列表中选择源时，我应该得到第二个列表，不包括我选择的源站。

Answer 1

这样的事情可能会让你开始：

＆＃13;

$('#s1').change(function(){
  var sel = this.value;
  $('#s2 option[value=' +sel+ ']').hide();
  $('#s2').fadeIn();
});

＆＃13;

#s2{display:none;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id="s1">
  <option value="">Choose</option>
  <option value="Australia">Australia</option>
  <option value="Canada">Canada</option>
  <option value="Finland">Finland</option>
  <option value="Russia">Russia</option>
  <option value="USA">USA</option>
</select>

<select id="s2">
  <option value="">Choose</option>
  <option value="Australia">Australia</option>
  <option value="Canada">Canada</option>
  <option value="Finland">Finland</option>
  <option value="Russia">Russia</option>
  <option value="USA">USA</option>
</select>

＆＃13;

这是基本想法。但是你可以通过增加一些东西来使它变得更强大：

＆＃13;

$('#s1').change(function(){
  var sel = this.value;
  if (sel == '') return false; //handle choosing "Choose"
  $('#s2 option').show(); //re-display any previously hidden
  $('#s2 option[value=' +sel+ ']').hide();
  $('#s2').fadeIn();
});

＆＃13;

#s2{display:none;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id="s1">
  <option value="">Choose</option>
  <option value="Australia">Australia</option>
  <option value="Canada">Canada</option>
  <option value="Finland">Finland</option>
  <option value="Russia">Russia</option>
  <option value="USA">USA</option>
</select>

<select id="s2">
  <option value="">Choose</option>
  <option value="Australia">Australia</option>
  <option value="Canada">Canada</option>
  <option value="Finland">Finland</option>
  <option value="Russia">Russia</option>
  <option value="USA">USA</option>
</select>

＆＃13;

Answer 2

当给出分层数据时，OP期望的是AJAX调用。我已经收回了我的关闭投票并添加了这个答案：

＆＃13;

$(function () {
  var data = {
    "One": ["1-1", "1-2", "1-3"],
    "Two": ["2-1", "2-2", "2-3"],
    "Three": ["3-1", "3-2", "3-3"]
  };
  $("#s-2").hide();
  $.each(data, function (i, v) {
    $("#s-1").append('<option value="' + i + '">' + i + '</option>');
  });
  $("#s-1").change(function () {
    if (this.value.length)
      $("#s-2").show();
    else
      $("#s-2").hide();
    $("#s-2").html("");
    $.each(data[this.value], function (v, i) {
      $("#s-2").append('<option value="' + i + '">' + i + '</option>');
    });
  });
});

＆＃13;

* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none;}

＆＃13;

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<select name="" id="s-1"><option value=""></option></select>
<select name="" id="s-2"></select>

＆＃13;

所以这就是这些：

默认隐藏第二个<select>。
如果第一个<select>的值为空，则隐藏第二个<select>。
使用基于第一个<select>。

<select>

希望这就是你要找的东西。

如何实现动态级联选择？

2 个答案: