javascript - 选择-选择多选 - 根据第一个的 selected.count 禁用第二个选择

标签 javascript jquery

我有 4 个“已选择”的多选框。

组 -> 类 -> 类别 -> 子类别

当从Group中选择一个选项时,它将使用相关选项填充Class(通过ajax/json)。

这很好用。但是,我需要将其扩展到以下内容:

如果从组中选择了 0 或多个 1 选项,我需要禁用其余 3 个子选择。

就像我要从 Class 中选择 0 个或 1 个以上选项一样,我需要禁用 categorysubcategory

我遇到的麻烦是,如何让js知道已选择了多少个选项?正如您在下面的控制台图像中看到的那样。我首先选择了Confectionery,然后选择了Liquor。第一个 console.logthis.value (属于组),第二个是带有我的类字段选项的 ajax 响应。当我去添加酒时,它说糖果仍然是 this.value,我期待的是 {Confectionery, Liquor}array 这就是为什么我问了问题。

这是我的 JavaScript:

我的每个选择框都调用此函数onChange menuChange('NEXT-FIELD', this.value)

function menuChange(field, value){

    /* clear all child select box values */
    switch(field){

        case "period":

            if(value == "year"){

                $("#yr").show();
                $("#yrmth").hide();

            } else if(value == "month"){

                $("#yr").show();
                $("#yrmth").show();

            } else if(value == "ytd"){

                $("#yr").hide();
                $("#yrmth").hide();

            } else if(value == "ttm"){

                $("#yr").hide();
                $("#yrmth").hide();

            }


        break;


    }
    console.log(value);
    document.getElementById(field).options.length = 0;

    $.ajax({
        url: "ajaxrequest.php",
        type: "post",
        dataType: 'json',
        data: { field: field,
              value: value },
        success: function (response) {


            $.each(response,function(key, value)
                {
                    $("#" + field).append('<option value=' + key + '>' + value + '</option>');
                });

            if(field == "period"){

            } else {
                $('#' + field).trigger("chosen:updated");
            }


           console.log(response);


        },
        error: function(jqXHR, textStatus, errorThrown) {
           console.log(textStatus, errorThrown);
        }


    });



}

$(document).ready(function(){
  //Start with all subs disabled.
  $('select:gt(5)').attr('disabled','disabled');
  arrSelects = ['group','class','category','subcategory'];

  //Listen to all selects for change
  $('select').on('change',function(){
    doSelects($(this));
  });
})

function doSelects(sel) {
  var selIndex = arrSelects.indexOf(sel.attr('class'));
  var selCount = sel.val().length;

  if(selCount == 1) {
    $('select:eq(' + parseInt(selIndex + 1) + ')').removeAttr('disabled');
    return;
  }

  if(!selCount || selCount > 1) {
    $('select:gt(' + parseInt(selIndex) + ')').attr('disabled','disabled').find('option').removeAttr('selected');
    return;
  }
}

console

编辑:这是我的页面的输出 HTML。我还更新了上面的 JavaScript 以包含完整的功能,以便页面的“句点”部分更有意义。

<body class="with-3d-shadow with-transitions">
    <form style="margin:0; padding:0;" action="changedb.php" method="post">
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="dashboard.php">Title</a>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <select style="display: inline; margin-top: 10px;" class="input-sm" name="dbname">
                        <option value="2_sar" selected="">SAR</option>
                        <option value="2_lstr">LSTR</option>
                    </select>
                    <button style="display: inline;" type="submit" class="btn btn-default">Go!</button>        
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Reports <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="?report=salesanalysis">Sales Analysis</a></li>
                                <li><a href="?report=baa">Brand Affinity Analysis</a></li>
                                <li><a href="?report=bvb">Brand Affinity by Nationality</a></li>
                                <li><a href="?report=xcatr">Cross Category Analysis</a></li>
                                <li><a href="?report=nationality">Nationality Report</a></li>
                                <li><a href="?report=destination">Destination Report</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Settings <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="?report=changepw">Change My Password</a></li>
                                <li><a href="cp/index.php">Control Panel</a></li>
                            </ul>
                        </li>
                        <li><a href="logout.php">Sign Out</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </form>
    <div class="container">
        <div class="row">
            <div class="col-xs-0 col-sm-2 sidebar">
                <ul class="nav nav-sidebar">
                    <li class="active"><a href="?report=salesanalysis">Sales Analysis <span class="sr-only">(current)</span></a></li>
                    <li><a href="?report=baa">Brand Affinity Analysis</a></li>
                    <li><a href="?report=bvb">Brand Affinity by Nationality</a></li>
                    <li><a href="?report=xcatr">Cross Category Analysis</a></li>
                    <li><a href="?report=nationality">Nationality Report</a></li>
                    <li><a href="?report=destination">Destination Report</a></li>
                </ul>
            </div>
            <!--Main Content Div -->
            <div class="col-xs-12 col-sm-10 col-md-10 col-sm-offset-2" align="center">
                <form action="" method="POST">
                    <div class="row">
                        <div align="left" class="col-xs-3">
                            <h2>&nbsp;&nbsp;Sales Analysis</h2>
                        </div>
                        <div align="left" class="col-xs-7 col-offset-xs-3">
                            <table>
                                <tbody>
                                    <tr>
                                        <td>Analyse &nbsp;&nbsp;</td>
                                        <td>
                                            <select name="measure" class="input-sm">
                                                <option value="sales">Sales</option>
                                                <option value="units">Units</option>
                                            </select>
                                            &nbsp;&nbsp;
                                        </td>
                                        <td>Period &nbsp;&nbsp;</td>
                                        <td>
                                            <select onchange="menuChange('period', this.value)" name="period" class="input-sm">
                                                <option value="year">Year</option>
                                                <option value="month">Month</option>
                                                <option value="ytd">YTD</option>
                                                <option value="ttm">TTM</option>
                                            </select>
                                            &nbsp;&nbsp;
                                        </td>
                                        <td>
                                            <select style="width: 80px" class="input-sm" onchange="menuChange('yrmth', this.value)" name="yr" id="yr">
                                                <option value="2015">2015</option>
                                                <option value="2014">2014</option>
                                                <option value="2013">2013</option>
                                                <option value="2012">2012</option>
                                            </select>
                                            &nbsp;&nbsp;
                                        </td>
                                        <td>
                                            <select style="width: 80px" class="input-sm" name="yrmth" id="yrmth" hidden="">
                                                <option value="201501">Jan</option>
                                                <option value="201502">Feb</option>
                                            </select>
                                            &nbsp;&nbsp;
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-xs-12 col-sm-10">
                            Filters &nbsp;&nbsp;
                            <select data-placeholder="Group" style="width: 115px; display: none;" class="chosen-select" multiple="" onchange="menuChange('class', this.value)" name="group[]" id="group">
                                <option value="Confectionery">Confectionery</option>
                                <option value="Liquor">Liquor</option>
                                <option value="Tobacco">Tobacco</option>
                            </select>
                            <div class="chosen-container chosen-container-multi" style="width: 115px;" title="" id="group_chosen">
                                <ul class="chosen-choices">
                                    <li class="search-field"><input type="text" value="Group" class="default" autocomplete="off" style="width: 65px;"></li>
                                </ul>
                                <div class="chosen-drop">
                                    <ul class="chosen-results"></ul>
                                </div>
                            </div>
                            &nbsp;&nbsp;<select data-placeholder="Class" style="width: 115px; display: none;" class="chosen-select" multiple="" onchange="menuChange('category', this.value)" name="class[]" id="class"></select>
                            <div class="chosen-container chosen-container-multi" style="width: 115px;" title="" id="class_chosen">
                                <ul class="chosen-choices">
                                    <li class="search-field"><input type="text" value="Class" class="default" autocomplete="off" style="width: 60px;"></li>
                                </ul>
                                <div class="chosen-drop">
                                    <ul class="chosen-results"></ul>
                                </div>
                            </div>
                            &nbsp;&nbsp;<select data-placeholder="Category" style="width: 115px; display: none;" class="chosen-select" multiple="" onchange="menuChange('subcategory', this.value)" name="category[]" id="category" disabled="disabled"></select>
                            <div class="chosen-container chosen-container-multi chosen-disabled" style="width: 115px;" title="" id="category_chosen">
                                <ul class="chosen-choices">
                                    <li class="search-field"><input type="text" value="Category" class="default" autocomplete="off" style="width: 83px;" disabled=""></li>
                                </ul>
                                <div class="chosen-drop">
                                    <ul class="chosen-results"></ul>
                                </div>
                            </div>
                            &nbsp;&nbsp;<select data-placeholder="Subcategory" style="width: 115px; display: none;" class="chosen-select" multiple="" name="subcategory[]" id="subcategory" disabled="disabled"></select>
                            <div class="chosen-container chosen-container-multi chosen-disabled" style="width: 115px;" title="" id="subcategory_chosen">
                                <ul class="chosen-choices">
                                    <li class="search-field"><input type="text" value="Subcategory" class="default" autocomplete="off" style="width: 105px;" disabled=""></li>
                                </ul>
                                <div class="chosen-drop">
                                    <ul class="chosen-results"></ul>
                                </div>
                            </div>
                            &nbsp;&nbsp;<button type="submit" class="btn btn-primary" name="submit">Go!</button>
                        </div>
                    </div>
                </form>
                <br>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function(){
                      $('.chosen-select').chosen();
          $('.chosen-select-deselect').chosen({ allow_single_deselect: true });
          });
    </script>
    </div>
    </div>
    </div>
    <!-- Bootstrap core JavaScript
        ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
</body>

当我尝试删除选项时,这是控制台中的错误。 未捕获类型错误:无法读取 null 的属性“长度”

最佳答案

这是您的代码。它工作正常:

<body class="with-3d-shadow with-transitions">
    <form style="margin:0; padding:0;" action="changedb.php" method="post">
        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="dashboard.php">Title</a>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <select style="display: inline; margin-top: 10px;" class="input-sm" name="dbname">
                        <option value="2_sar" selected="">SAR</option>
                        <option value="2_lstr">LSTR</option>
                    </select>
                    <button style="display: inline;" type="submit" class="btn btn-default">Go!</button>        
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Reports <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="?report=salesanalysis">Sales Analysis</a></li>
                                <li><a href="?report=baa">Brand Affinity Analysis</a></li>
                                <li><a href="?report=bvb">Brand Affinity by Nationality</a></li>
                                <li><a href="?report=xcatr">Cross Category Analysis</a></li>
                                <li><a href="?report=nationality">Nationality Report</a></li>
                                <li><a href="?report=destination">Destination Report</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Settings <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="?report=changepw">Change My Password</a></li>
                                <li><a href="cp/index.php">Control Panel</a></li>
                            </ul>
                        </li>
                        <li><a href="logout.php">Sign Out</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </form>
    <div class="container">
        <div class="row">
            <div class="col-xs-0 col-sm-2 sidebar">
                <ul class="nav nav-sidebar">
                    <li class="active"><a href="?report=salesanalysis">Sales Analysis <span class="sr-only">(current)</span></a></li>
                    <li><a href="?report=baa">Brand Affinity Analysis</a></li>
                    <li><a href="?report=bvb">Brand Affinity by Nationality</a></li>
                    <li><a href="?report=xcatr">Cross Category Analysis</a></li>
                    <li><a href="?report=nationality">Nationality Report</a></li>
                    <li><a href="?report=destination">Destination Report</a></li>
                </ul>
            </div>
            <!--Main Content Div -->
            <div class="col-xs-12 col-sm-10 col-md-10 col-sm-offset-2" align="center">
                <form action="" method="POST">
                    <div class="row">
                        <div align="left" class="col-xs-3">
                            <h2>&nbsp;&nbsp;Sales Analysis</h2>
                        </div>
                        <div align="left" class="col-xs-7 col-offset-xs-3">
                            <table>
                                <tbody>
                                    <tr>
                                        <td>Analyse &nbsp;&nbsp;</td>
                                        <td>
                                            <select name="measure" class="input-sm">
                                                <option value="sales">Sales</option>
                                                <option value="units">Units</option>
                                            </select>
                                            &nbsp;&nbsp;
                                        </td>
                                        <td>Period &nbsp;&nbsp;</td>
                                        <td>
                                            <select onchange="menuChange('period', this.value)" name="period" class="input-sm">
                                                <option value="year">Year</option>
                                                <option value="month">Month</option>
                                                <option value="ytd">YTD</option>
                                                <option value="ttm">TTM</option>
                                            </select>
                                            &nbsp;&nbsp;
                                        </td>
                                        <td>
                                            <select style="width: 80px" class="input-sm" onchange="menuChange('yrmth', this.value)" name="yr" id="yr">
                                                <option value="2015">2015</option>
                                                <option value="2014">2014</option>
                                                <option value="2013">2013</option>
                                                <option value="2012">2012</option>
                                            </select>
                                            &nbsp;&nbsp;
                                        </td>
                                        <td>
                                            <select style="width: 80px" class="input-sm" name="yrmth" id="yrmth" hidden="">
                                                <option value="201501">Jan</option>
                                                <option value="201502">Feb</option>
                                            </select>
                                            &nbsp;&nbsp;
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div id="selectGroup" class="col-xs-12 col-sm-10">
                            Filters &nbsp;&nbsp;
                            <!-- <select data-placeholder="Group" style="width: 115px; display: none;" class="chosen-select" multiple="" onchange="menuChange('class', this.value)" name="group[]" id="group">
                                <option value="Confectionery">Confectionery</option>
                                <option value="Liquor">Liquor</option>
                                <option value="Tobacco">Tobacco</option>
                            </select> -->
                            <select multiple class="group">
                              <option value="Confectionery">Confectionery</option>
                              <option value="Liquor">Liquor</option>
                              <option value="Tobacco">Tobacco</option>
                            </select>
                            <div class="chosen-container chosen-container-multi" style="width: 115px;" title="" id="group_chosen">
                                <ul class="chosen-choices">
                                    <li class="search-field"><input type="text" value="Group" class="default" autocomplete="off" style="width: 65px;"></li>
                                </ul>
                                <div class="chosen-drop">
                                    <ul class="chosen-results"></ul>
                                </div>
                            </div>
                            <!-- &nbsp;&nbsp;<select data-placeholder="Class" style="width: 115px; display: none;" class="chosen-select" multiple="" onchange="menuChange('category', this.value)" name="class[]" id="class"></select> -->
                            <select multiple class="class">
                              <option value="1">Option 1</option><option value="2">Option 2</option><option value="3">Option 3</option><option value="4">Option 4</option>
                            </select>
                            <div class="chosen-container chosen-container-multi" style="width: 115px;" title="" id="class_chosen">
                                <ul class="chosen-choices">
                                    <li class="search-field"><input type="text" value="Class" class="default" autocomplete="off" style="width: 60px;"></li>
                                </ul>
                                <div class="chosen-drop">
                                    <ul class="chosen-results"></ul>
                                </div>
                            </div>
                            <!-- &nbsp;&nbsp;<select data-placeholder="Category" style="width: 115px; display: none;" class="chosen-select" multiple="" onchange="menuChange('subcategory', this.value)" name="category[]" id="category" disabled="disabled"></select> -->
                            <select multiple class="category">
                              <option value="1">Option 1</option><option value="2">Option 2</option><option value="3">Option 3</option><option value="4">Option 4</option>
                            </select>                            
                            <div class="chosen-container chosen-container-multi chosen-disabled" style="width: 115px;" title="" id="category_chosen">
                                <ul class="chosen-choices">
                                    <li class="search-field"><input type="text" value="Category" class="default" autocomplete="off" style="width: 83px;" disabled=""></li>
                                </ul>
                                <div class="chosen-drop">
                                    <ul class="chosen-results"></ul>
                                </div>
                            </div>
                            <!-- &nbsp;&nbsp;<select data-placeholder="Subcategory" style="width: 115px; display: none;" class="chosen-select" multiple="" name="subcategory[]" id="subcategory" disabled="disabled"></select> -->
                            <select multiple class="subcategory">
                              <option value="1">Option 1</option><option value="2">Option 2</option><option value="3">Option 3</option><option value="4">Option 4</option>
                            </select>   
                            </div>div>                         

                            <div class="chosen-container chosen-container-multi chosen-disabled" style="width: 115px;" title="" id="subcategory_chosen">
                                <ul class="chosen-choices">
                                    <li class="search-field"><input type="text" value="Subcategory" class="default" autocomplete="off" style="width: 105px;" disabled=""></li>
                                </ul>
                                <div class="chosen-drop">
                                    <ul class="chosen-results"></ul>
                                </div>
                            </div>
                            &nbsp;&nbsp;<button type="submit" class="btn btn-primary" name="submit">Go!</button>
                        </div>
                    </div>
                </form>
                <br>
            </div>
        </div>
    </div>

    <!-- <script>
        $(document).ready(function(){
                      $('.chosen-select').chosen();
          $('.chosen-select-deselect').chosen({ allow_single_deselect: true });
          });
    </script> -->

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  //Start with all subs disabled.
  $('#selectGroup select:gt(0)').attr('disabled','disabled');
  arrSelects = ['group','class','category','subcategory'];

  //Listen to all selects for change
  $('#selectGroup select').on('change',function(){
    doSelects($(this));
  });
})

function doSelects(sel) {
  var selIndex = arrSelects.indexOf(sel.attr('class'));
  var selCount = sel.val() == null?0:sel.val().length;

  if(selCount == 1) {
    $('#selectGroup select:eq(' + parseInt(selIndex + 1) + ')').removeAttr('disabled');
    return;
  }

  if(!selCount || selCount > 1) {
    $('#selectGroup select:gt(' + parseInt(selIndex) + ')').attr('disabled','disabled').find('option').removeAttr('selected');
    return;
  }
}
</script>


    </div>
    </div>
    </div>
    <!-- Bootstrap core JavaScript
        ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
</body>

关于javascript - 选择-选择多选 - 根据第一个的 selected.count 禁用第二个选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35458975/

相关文章:

javascript - 访问 IFRAME 中的属性的权限被拒绝

javascript - 在 Rails 中动态选择项目

javascript - Babel Decorators 转换,无论我尝试什么,都会不断获得意想不到的标记(使用 React 项目)

jquery - 在单元素 id-selector 上使用 jQuery .each() 方法

jquery - 从克隆的选择选项中删除 "selected"属性在 IE 中不起作用

javascript - 如何使用 Backbone.js 将多个记录渲染到 html 表中?

javascript - 在 ReactJS 中将 Prop 从一个组件传递到另一个组件返回未定义

javascript - 从数组中选取 2 个随机元素

javascript - 在文件夹内创建子文件夹

javascript - jQuery:为什么我的动画 p "jump"?