Javascript 多选限制选择次数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30474614/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple Select limit number of selection
提问by Geetika
I want user to select maximum of only three options from multiple select options. I tried this code so far:
我希望用户从多个选择选项中最多只能选择三个选项。到目前为止我试过这个代码：
<select id="userRequest_activity" required name="activity[]" class="multiselect form-control" multiple="multiple">
<option value="2">Bungee Jumping</option>
<option value="3">Camping</option>
<option value="5">Mountain Biking</option>
<option value="6">Rappelling</option>
<option value="7">Rock Climbing / Bouldering</option>
<option value="8">Skiing</option>
<option value="10">Wild Life (Safari)</option>
<option value="11">Canoeing & Kayaking</option>
<option value="12">Rafting</option>
<option value="13">Sailing</option>
<option value="14">Scuba Diving</option>
<option value="15">Snorkeling</option>
<option value="16">Surfing</option>
<option value="18">Hang Gliding</option>
<option value="19">Hot-air Ballooning</option>
<option value="20">Micro-light Aircrafts</option>
<option value="21">Paragliding</option>
<option value="22">Paramotoring</option>
<option value="23">Parasailing</option>
<option value="24">Skydiving / Parachuting</option>
<option value="25">Zip-line / Flying Fox</option>
<option value="26">Caving</option>
<option value="27">Cycling</option>
<option value="28">Fishing & Angling</option>
<option value="29">Motorbike trips</option>
<option value="30">Nature Walks</option>
<option value="31">Road Trips</option>
<option value="32">Zorbing</option>
<option value="33">Trekking Hiking and Mountaineering</option>
<option value="34">Backpacking</option>
<option value="61">Water</option>
</select>
The javascript code:
javascript代码：
<script type="text/javascript">
$("select").change(function() {
if ($("select option:selected").length > 3) {
$(this).removeAttr("selected");
alert('You can select upto 3 options only');
}
});
</script>
This code shows the alert box when selected more than 3 options but still allow access to select the 4th, 5th, 6th and so on selections with the alert box appearing. How to validate this?
此代码在选择超过 3 个选项时显示警报框，但仍允许访问选择第 4、5、6 等选项，并出现警报框。如何验证这一点？
回答by Deenadhayalan Manoharan
Try this...
尝试这个...
Check length and deselect after reach maximum select
检查长度并在达到最大选择后取消选择
<select id="userRequest_activity" required name="activity[]" class="multiselect form-control" multiple="multiple">
<option value="2">Bungee Jumping</option>
<option value="3">Camping</option>
<option value="5">Mountain Biking</option>
<option value="6">Rappelling</option>
<option value="7">Rock Climbing / Bouldering</option>
<option value="8">Skiing</option>
<option value="10">Wild Life (Safari)</option>
<option value="11">Canoeing & Kayaking</option>
<option value="12">Rafting</option>
<option value="13">Sailing</option>
<option value="14">Scuba Diving</option>
<option value="15">Snorkeling</option>
<option value="16">Surfing</option>
<option value="18">Hang Gliding</option>
<option value="19">Hot-air Ballooning</option>
<option value="20">Micro-light Aircrafts</option>
<option value="21">Paragliding</option>
<option value="22">Paramotoring</option>
<option value="23">Parasailing</option>
<option value="24">Skydiving / Parachuting</option>
<option value="25">Zip-line / Flying Fox</option>
<option value="26">Caving</option>
<option value="27">Cycling</option>
<option value="28">Fishing & Angling</option>
<option value="29">Motorbike trips</option>
<option value="30">Nature Walks</option>
<option value="31">Road Trips</option>
<option value="32">Zorbing</option>
<option value="33">Trekking Hiking and Mountaineering</option>
<option value="34">Backpacking</option>
<option value="61">Water</option>
</select>
<script type="text/javascript">
$(document).ready(function() {
var last_valid_selection = null;
$('#userRequest_activity').change(function(event) {
if ($(this).val().length > 3) {
$(this).val(last_valid_selection);
} else {
last_valid_selection = $(this).val();
}
});
});
</script>
回答by Tushar
You are using thisinside changeevent, which is reference to select.
您正在使用this内部change事件，它是对select.
Try this:
尝试这个：
$("select").on('click', 'option', function() {
if ($("select option:selected").length > 3) {
$(this).removeAttr("selected");
// alert('You can select upto 3 options only');
}
});
Demo: http://jsfiddle.net/tusharj/tmkzebnj/
演示：http: //jsfiddle.net/tusharj/tmkzebnj/
EDIT
编辑
$("select").on('change', function(e) {
if (Object.keys($(this).val()).length > 3) {
$('option[value="' + $(this).val().toString().split(',')[3] + '"]').prop('selected', false);
}
});
回答by Stranger
You can disable the unselected options once the user selected the maximum limit and enable them again when the total selection count goes below the maximum limit.
您可以在用户选择最大限制后禁用未选择的选项，并在总选择计数低于最大限制时再次启用它们。
Here is the sample code,
这是示例代码，
function maxAllowedMultiselect(obj, maxAllowedCount) {
var selectedOptions = jQuery('#'+obj.id+" option[value!=\'\']:selected");
if (selectedOptions.length >= maxAllowedCount) {
if (selectedOptions.length > maxAllowedCount) {
selectedOptions.each(function(i) {
if (i >= maxAllowedCount) {
jQuery(this).prop("selected",false);
}
});
}
jQuery('#'+obj.id+' option[value!=\'\']').not(':selected').prop("disabled",true);
} else {
jQuery('#'+obj.id+' option[value!=\'\']').prop("disabled",false);
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="userRequest_activity" name="activity[]" onchange="maxAllowedMultiselect(this, 2)" multiple>
<option value="1">Bungee Jumping</option>
<option value="2">Camping</option>
<option value="3">Mountain Biking</option>
<option value="4">Rappelling</option>
<option value="5">Rock Climbing / Bouldering</option>
<option value="6">Skiing</option>
<option value="7">Wild Life (Safari)</option>
<option value="8">Canoeing & Kayaking</option>
<option value="9">Rafting</option>
<option value="10">Sailing</option>
</select>