選擇選擇多選-禁用基於選擇的第二選擇
[英]Chosen-select multi-select - disable 2nd select based on selected.count of first
問題描述
我有4個“選擇”的多選框。
Group -> Class -> Category -> Subcategory
當從Group選擇一個選項時，它將使用相關選項（通過ajax / json）填充Class 。
這很好。 但是，我需要將此擴展到以下內容：
如果從組中選擇0或超過1選項，則需要禁用其余3個子選擇。
就像我要從Class選擇0個或多個1個選項一樣，我需要禁用， category和subcategory 。
我遇到的麻煩是，如何讓js知道已經選擇了多少個選項？ 如您在下面的控制台圖像中所見。 我首先選擇了Confectionery ，然后選擇了Liquor 。 第一個console.log是this.value （組），第二個是ajax響應，其中包含我對class字段的選擇。 當我去加酒時，它說糖果仍然是this.value，我期待着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以包括完整功能，以便頁面的“句點”部分更有意義。
<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 個解決方案
解決方案1
1 2016-02-17 15:13:26
應該這樣做：
<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>
編輯 - - - -
如果頁面上還有其他選擇，請嘗試以下操作：
<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().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>
<body>
<div id="selectGroup">
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>
</div>
</body>
</html>
解決方案2
1 已采納 2016-02-17 16:46:37
這是您的代碼。 它工作正常：
<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>
如果選中，則禁用第二選擇框的選項
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.