禁用 <选择>在另一个 <select> 中选择时的选项盒子 [英] Disable <select> option when selected in another <select> box
问题描述
我在 php mail() 表单中有一组 16 个选择框,如果在任何其他框中选择了某个选项,我想禁用该选项.选择框中的选项顺序不一样,我需要php邮件的值.我希望填写表单的用户不能选择相同的选项两次或更多次.
I've got a group of 16 select boxes in a php mail() form, and I want to disable an option if it's chosen in any other box. The order of options in the select boxes aren't the same, and the I need the value for the php mail. I want the user filling in the form to not be able to choose the same option twice or more.
<select name="box1" id="box1">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
<select name="box2" id="box2">
<option value="Two">Two</option>
<option value="One">One</option>
<option value="Three">Three</option>
<option value="Life">Life</option>
</select>
<select name="box3" id="box3">
<option value="Life">Life</option>
<option value="One">One</option>
<option value="Two">Two</option>
</select>
此外,在网站的更下方,我想对另一组 8 个选择框做同样的事情 - 它们包含一些相同的选项,但我希望它们从一开始就可以选择,直到从其中一个被选中.
Also, further down the website, I want to do the same with another group of 8 select boxes - and they contain some of the same options, but then I want them all to be choosable from the beginning, until an option from one of them get picked.
我对 jQuery 和 JavaScript 知之甚少.帮助?
I know too little about jQuery and JavaScript. Help?
推荐答案
使用
.filter
获取与当前值相似的选项元素.
Use
.filter
to get option-elements having value similar as current value.
$('select').on('change', function() {
$('option').prop('disabled', false); //reset all the disabled options on every change event
$('select').each(function() { //loop through all the select elements
var val = this.value;
$('select').not(this).find('option').filter(function() { //filter option elements having value as selected option
return this.value === val;
}).prop('disabled', true); //disable those option elements
});
}).change(); //trihgger change handler initially!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select name="box1" id="box1">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
</select>
<select name="box2" id="box2">
<option value="Two">Two</option>
<option value="One">One</option>
<option value="Three">Three</option>
<option value="Life">Life</option>
</select>
<select name="box3" id="box3">
<option value="Life">Life</option>
<option value="One">One</option>
<option value="Two">Two</option>
</select>
这篇关于禁用 <选择>在另一个 <select> 中选择时的选项盒子的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!