Question

我有2个选择输入。我希望第二个选项取决于第一个选项。

实施例

选择1 - 内容列表：

choice 1
choice 2

选择2 - 内容列表：

如果我从第一个选择choice 1：

案例A
案例B
案例C

如果我从第一个选择choice 2：

case X
case Y
案例Z

显然两个选择输入都在同一页面中！

我想我必须使用jQuery，但我不知道如何。

Answer 1

我只是编写了一些相似的代码，不确定这是否对您有帮助。

$（document）.ready（function（）{

$.DDCache = {
    init: function (DropDown) {
        this.cache = new Object(DropDown.clone());
    },
    FilterDropDown: function (DropDown, value, condition) {
        DropDown.empty();
        DropDown.append(this.cache.children().clone().toArray());
        DropDown.children("[" + value + "='" + condition + "']").remove();
    }
}

//init the cache for the select you want to filter

$.DDCache.init($("#Select2"));

$("#Select1").change(function () {
    $.DDCache.FilterDropDown($("#Select2"), "value", $("#Select1").val());
    });

}）;

亲切的问候

：）

Answer 2

我是对的，你想要这样的东西吗？

HTML：

<div class="row">
    <div class="span4 offset4">
      <form class="control-group" action="" method="post">
        <!-- DROPDOWN 1 - CHOICE SELECTION -->
        <div class="form-group">
          <select name="document_type" class="form-control input-lg" id="Select1">
            <option value="casea">CHOICE 1</option>
            <option value="caseb">CHOICE 2</option>
            <option value="casec">CHOICE 3</option>
            <option value="cased">CHOICE 4</option>
            <option value="casee">CHOICE 5</option>
          </select>
        </div>
        <!-- DROPDOWN 2 - LIST SELECTION-->
        <div class="form-group">
          <select name="document_type" class="form-control input-lg" id="Select2">
            <option value="casea">CASE A</option>
            <option value="caseb">CASE B</option>
            <option value="casec">CASE C</option>
            <option value="cased">CASE D</option>
            <option value="casee">CASE E</option>
          </select>
        </div>
      </form>
    </div>
</div>

和这样的脚本？

 $(document).ready(function () {
     $.DDCache = {
        init: function (DropDown) {
        this.cache = new Object(DropDown.clone());
     },
     FilterDropDown: function (DropDown, value, condition) {
        DropDown.empty();
        DropDown.append(this.cache.children().clone().toArray());
        DropDown.children("[" + value + "!='" + condition + "']").remove();
     }
  }

  //init the cache for the select you want to filter

  $.DDCache.init($("#Select2"));

   $("#Select1").change(function () {
      $.DDCache.FilterDropDown($("#Select2"), "value", $("#Select1").val());
   });
});

刚刚为你创建了一个jsfiddle：）

http://jsfiddle.net/NBuSA/6/

根据另一个选择的选项更新一个选择

2 个答案: