选择多选 - 禁用第一次选择基于selected.count
我有4＆＃34;选择＆＃34;多选框。
Group -> Class -> Category -> Subcategory
当从Group中选择一个选项时，它会使用相关选项（通过ajax / json）填充Class。
这很有效。但是，我需要将其扩展到以下内容：
如果从组中选择0或多个1选项，我需要禁用剩余的3个子选项。
就像我要从Class中选择0个或多个选项一样，我需要停用category和subcategory。
我遇到的麻烦是，如何让js知道选择了多少选项？正如您在下面的控制台图像中看到的那样。我首先选择了Confectionery，然后是Liquor。第一个console.log是this.value（组），第二个是带有我的类字段选项的ajax响应。当我去添加酒时，它说糖果仍然是这个。值得，我期待array {Confectionery, Liquor}这就是我问这个问题的原因。
这是我的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;
}
}
编辑：这是我的页面的输出HTML。我还更新了上面的javascript，以包含完整的功能，以便＆＃39;期间＆＃39;我的页面部分更有意义。
<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>
<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> Sales Analysis</h2>
</div>
<div align="left" class="col-xs-7 col-offset-xs-3">
<table>
<tbody>
<tr>
<td>Analyse </td>
<td>
<select name="measure" class="input-sm">
<option value="sales">Sales</option>
<option value="units">Units</option>
</select>
</td>
<td>Period </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>
</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>
</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>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-12 col-sm-10">
Filters
<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>
<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>
<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>
<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>
<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>
当我尝试删除选项时，这是控制台中的错误。
Uncaught TypeError: Cannot read property 'length' of null
2 个答案:
答案 0 :(得分：1)
这应该这样做：
~/.gradle/cachesEDIT -------
如果页面上有其他选择，请尝试此操作：
<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.
$('select:gt(0)').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;
}
}
</script>
<body>
group:<select multiple class="group"><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><br>
class:<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><br>
category:<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><br>
subcategory:<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><br>
</body>
</html>
答案 1 :(得分：1)
这是你的代码。它工作正常：
<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>
<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> Sales Analysis</h2>
</div>
<div align="left" class="col-xs-7 col-offset-xs-3">
<table>
<tbody>
<tr>
<td>Analyse </td>
<td>
<select name="measure" class="input-sm">
<option value="sales">Sales</option>
<option value="units">Units</option>
</select>
</td>
<td>Period </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>
</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>
</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>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<br>
<div class="row">
<div id="selectGroup" class="col-xs-12 col-sm-10">
Filters
<!-- <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>
<!-- <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>
<!-- <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>
<!-- <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>
<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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？