时间戳

首页 > 解决方案 > 依赖多选框

javascript - 依赖多选框

问题描述

我使用的代码主要来自这个答案https://stackoverflow.com/a/29624809/9481131

正在进行的代码：

HTML

        <label style="font-weight: bold">Choose the literary genres</label>

          <select name="genre" id="genre" multiple>
            <option value="all">All genres</option>
            <option value="classic">Classic</option>
            <option value="romance">Romance</option>
            <option value="sciencefiction">Science fiction</option>
          </select>

        <label style="font-weight: bold">Choose the books</label>
          <select disabled="disabled" class="subcat" id="book" name="book" multiple>
            <option value>All books</option>
            <!-- Classic books -->
            <optgroup data-rel="classic">
              <option value="classic_book_1">classic book 1</option>
              <option value="classic_book_2">classic book 2</option>
              <option value="classic_book_3">classic book 3</option>
            </optgroup>
            <!-- Romance books-->
            <optgroup data-rel="romance">
              <option value="romance_book_1">romance book 1</option>
              <option value="romance_book_2">romance book 2</option>
              <option value="romance_book_3">romance book 3</option>
            </optgroup>
            <!-- Science fiction books-->
            <optgroup data-rel="sciencefiction">
              <option value="sciencefiction_book_1">science fiction book 1</option>
              <option value="sciencefiction_book_2">science fiction book 2</option>
              <option value="sciencefiction_book_3">science fiction book 3</option>
            </optgroup>
          </select>

Javascript

<script>
$(function(){
    
    var $cat = $("#genre"),
        $subcat = $("#book");
    
    var optgroups = {};
    
    $subcat.each(function(i,v){
        var $e = $(v);
        var _id = $e.attr("id");
            optgroups[_id] = {};
            $e.find("optgroup").each(function(){
        var _r = $(this).data("rel");
        $(this).find("option").addClass("is-dyn");
        optgroups[_id][_r] = $(this).html();
            });
    });
    $subcat.find("optgroup").remove();
    
    var _lastRel;
    $cat.on("change",function(){
        var _rel = $(this).val();
        if(_lastRel === _rel) return true;
        _lastRel = _rel;
        $subcat.find("option").attr("style","");
        $subcat.val("");
        $subcat.find(".is-dyn").remove();
        if(!_rel) return $subcat.prop("disabled",true);
        $subcat.each(function(){
            var $el = $(this);
          var _id = $el.attr("id");
          $el.append(optgroups[_id][_rel]);
        });
        $subcat.prop("disabled",false);
    });
    
});
</script>

在这里看小提琴：http: //jsfiddle.net/53tL7jhf/

总而言之，我有两个选择框（每个框中都有多选的可能性）。第二个选择框中的数据取决于第一个框中选择的数据。

我想要的是：

  1. 然后在第一个框中选择“所有流派”，第二个框显示所有书籍。像这样：
    |----------------------------|--------------------|
    | Choose the literary genres |  Choose the books  |
    |----------------------------|--------------------|
    |    All genres (SELECTED)   |      All books     |
    |----------------------------|--------------------|
    |                            |    classic book 1  |
    |----------------------------|--------------------|
    |                            |    classic book 2  |
    |----------------------------|--------------------|
    |                            |    classic book 3  |
    |----------------------------|--------------------|
    |                            |    romance book 1  |
    |----------------------------|--------------------|
    |                            |    romance book 2  |
    |----------------------------|--------------------|
    |                            |    romance book 3  |
    |----------------------------|--------------------|
    |                            | sci fiction book 1 |
    |----------------------------|--------------------|
    |                            | sci fiction book 2 |
    |----------------------------|--------------------|
    |                            |         etc.       |
    |----------------------------|--------------------|
  1. 然后在第一个框中选择了多个流派，第二个框显示所有选定流派的书籍。像这样：
|----------------------------|--------------------|
| Choose the literary genres |  Choose the books  |
|----------------------------|--------------------|
|       Classic (SELECTED)   |      All books     |
|----------------------------|--------------------|
| Science fiction (SELECTED) |    classic book 1  |
|----------------------------|--------------------|
|                            |    classic book 2  |
|----------------------------|--------------------|
|                            |    classic book 3  |
|----------------------------|--------------------|
|                            | sci fiction book 1 |
|----------------------------|--------------------|
|                            | sci fiction book 2 |
|----------------------------|--------------------|
|                            | sci fiction book 3 |
|----------------------------|--------------------|

提前感谢您的帮助。

标签： javascripthtmljqueryselect

解决方案

因为，你已经mutliple在你的选择框中使用了，所以返回的值在array。如果你要console.log($(this).val())输出进来的是（数组），即：[..]。所以，目前你的代码只取一个值而不是其他值。相反，你可以each再次使用循环来也迭代该数组值。

演示代码：

$(function() {

  var $cat = $("#genre"),
    $subcat = $("#book");

  var optgroups = {};

  $subcat.each(function(i, v) {
    var $e = $(v);
    var _id = $e.attr("id");
    optgroups[_id] = {};
    $e.find("optgroup").each(function() {
      var _r = $(this).data("rel");
      $(this).find("option").addClass("is-dyn");
      optgroups[_id][_r] = $(this).html();
    });
  });
  $subcat.find("optgroup").remove();
  var _lastRel;
  $cat.on("change", function() {
    var _rel = $(this).val();
    if (_lastRel === _rel) return true;
    _lastRel = _rel;
    $subcat.find("option").attr("style", "");
    $subcat.val("");
    $subcat.find(".is-dyn").remove();
    if (!_rel) return $subcat.prop("disabled", true);
    $subcat.each(function() {
      var $el = $(this);
      var _id = $el.attr("id");
      //if arrray contains all option
      if (_rel.indexOf("all") > -1) {
      //loop though options
        $("#genre option").each(function() {
        //append options in other selects
          $el.append(optgroups[_id][$(this).val()]);
        })
      } else {
        //loop through values got from selctbox
        $(_rel).each(function(index, value) {
          $el.append(optgroups[_id][value]); //passs that value
        }) //close
      }

    });
    $subcat.prop("disabled", false);
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label style="font-weight: bold">Choose the literary genres</label>

<select name="genre" id="genre" multiple>
  <option value="all">All genres</option>
  <option value="classic">Classic</option>
  <option value="romance">Romance</option>
  <option value="sciencefiction">Science fiction</option>
</select>

<label style="font-weight: bold">Choose the books</label>
<select disabled="disabled" class="subcat" id="book" name="book" multiple>
  <option value>All books</option>
  <!-- Home Ware -->
  <optgroup data-rel="classic">
    <option value="classic_book_1">classic book 1</option>
    <option value="classic_book_2">classic book 2</option>
    <option value="classic_book_3">classic book 3</option>
  </optgroup>
  <!-- Education -->
  <optgroup data-rel="romance">
    <option value="romance_book_1">romance book 1</option>
    <option value="romance_book_2">romance book 2</option>
    <option value="romance_book_3">romance book 3</option>
  </optgroup>
  <!-- Books -->
  <optgroup data-rel="sciencefiction">
    <option value="sciencefiction_book_1">science fiction book 1</option>
    <option value="sciencefiction_book_2">science fiction book 2</option>
    <option value="sciencefiction_book_3">science fiction book 3</option>
  </optgroup>
</select>

推荐阅读