admin管理员组文章数量:1323355
I want to prevent the user from selecting the same value twice in this form
<select name="indication_subject[]">
<option value="" selected="selected">a </option>
<option> Accounting</option>
<option> Afrikaans</option>
<option> Applied Information and Communication Technology</option>
<option> Arabic</option>
<option> Art and Design</option>
<option> Biology</option>
<option> Business Studies</option>
</select>
<select name="indication_subject[]">
<option value="" selected="selected">a </option>
<option> Accounting</option>
<option> Afrikaans</option>
<option> Applied Information and Communication Technology</option>
<option> Arabic</option>
<option> Art and Design</option>
<option> Biology</option>
<option> Business Studies</option>
</select>
I want to prevent the user from selecting the same value twice in this form
<select name="indication_subject[]">
<option value="" selected="selected">a </option>
<option> Accounting</option>
<option> Afrikaans</option>
<option> Applied Information and Communication Technology</option>
<option> Arabic</option>
<option> Art and Design</option>
<option> Biology</option>
<option> Business Studies</option>
</select>
<select name="indication_subject[]">
<option value="" selected="selected">a </option>
<option> Accounting</option>
<option> Afrikaans</option>
<option> Applied Information and Communication Technology</option>
<option> Arabic</option>
<option> Art and Design</option>
<option> Biology</option>
<option> Business Studies</option>
</select>
Share
Improve this question
edited Mar 2, 2011 at 13:40
Zoidberg
10.3k2 gold badges33 silver badges53 bronze badges
asked Mar 2, 2011 at 13:34
wymanwyman
211 gold badge1 silver badge3 bronze badges
6
- 1 Can you use jquery or does it have to be plain javascript? And wha do you have two selects with not only the same options but also the same name? – ThiefMaster Commented Mar 2, 2011 at 13:40
-
What about using some checkboxes named
"indication_subject[accounting]"
,"indication_subject[afrikaans]"
, etc, instead of two select boxes? This will allow the user choose a variable number of distinct items. Of course, this wouldn't help if you want the user to choose exactly two items. – redShadow Commented Mar 2, 2011 at 13:43 -
@ThiefMaster Using the same name for more than one form item, you get
?myname=val1&myname=val2&myname=val3
in the request url, that usually gets converted in anarray(val1, val2, val3)
. – redShadow Commented Mar 2, 2011 at 13:45 - I agree with both ThiefMaster and redShadow. You're making it very difficult for yourself having the same name for the 2 selects... – FarligOpptreden Commented Mar 2, 2011 at 13:45
- @redShadow: I know. But then you usually do not use the same values, too. – ThiefMaster Commented Mar 2, 2011 at 13:48
3 Answers
Reset to default 4I'm not sure how you're selecting the elements, so I'll give them an ID for simplicity.
Example: http://jsfiddle/x4E5Q/1/
function preventDupes( select, index ) {
var options = select.options,
len = options.length;
while( len-- ) {
options[ len ].disabled = false;
}
select.options[ index ].disabled = true;
if( index === select.selectedIndex ) {
alert('You\'ve already selected the item "' + select.options[index].text + '".\n\nPlease choose another.');
this.selectedIndex = 0;
}
}
var select1 = select = document.getElementById( 'select1' );
var select2 = select = document.getElementById( 'select2' );
select1.onchange = function() {
preventDupes.call(this, select2, this.selectedIndex );
};
select2.onchange = function() {
preventDupes.call(this, select1, this.selectedIndex );
};
html
<select id="select1" name="indication_subject[]">
<option value="" selected="selected">a </option>
<option> Accounting</option>
<option> Afrikaans</option>
<!-- ...and so on... -->
<select id="select2" name="indication_subject[]">
<option value="" selected="selected">a </option>
<option> Accounting</option>
<option> Afrikaans</option>
<!-- ...and so on... -->
EDIT: Changed to deal with browsers that don't support .disabled
. Credit to @Zoidberg.
Ultimately, if you can afford the real-estate i would use Radio buttons instead, or checkboxes and only allow them to select 2 check boxes at the most. To me drop downs don't work in this situation
However, if you don't have the real-estate and you must use dropdowns, then your best bet, is once they have selected a value in the first drop down, disable or remove it in the second dropdown, and vice versa (incase they select a value in the first one). I would remend disabling as opposed to removing, as it will be more apparent to the user what is going on.
<select id="subject1" onchange="updateSelect(this,'subject2');" name="indication_subject[]">
<option value="" selected="selected">a </option>
<option value="1"> Accounting</option>
<option value="2"> Afrikaans</option>
<option value="3"> Applied Information and Communication Technology</option>
<option value="4"> Arabic</option>
<option value="5"> Art and Design</option>
<option value="6"> Biology</option>
<option value="7"> Business Studies</option>
</select>
<select id="subject2" name="indication_subject[]" onchange="updateSelect(this,'subject1');" >
<option value="" selected="selected">a </option>
<option value="1"> Accounting</option>
<option value="2"> Afrikaans</option>
<option value="3"> Applied Information and Communication Technology</option>
<option value="4"> Arabic</option>
<option value="5"> Art and Design</option>
<option value="6"> Biology</option>
<option value="7"> Business Studies</option>
</select>
Then the js that goes with it
function updateSelect(changedSelect, selectId) {
var otherSelect = document.getElementById(selectId);
for (var i = 0; i < otherSelect.options.length; ++i) {
otherSelect.options[i].disabled = false;
}
if (changedSelect.selectedIndex == 0) {
return;
}
otherSelect.options[changedSelect.selectedIndex].disabled = true;
}
The only problem is, IE 7 and earlier doesn't support disabled. If this is a deal breaker than you will have to go with removing the option from the Other Select, and then replace it later. Only issue with this is that it will change the order of options, unless you refresh the whole list. To refresh the whole list, you will need to store the options and values in an array (kinda like a model) that never changes and is used to update the selects when the change event occurs.
try this, add id="indication_subject1"
in select 1.
and id="indication_subject2"
in select 2.
Javascript:
$('#indication_subject1').change(function(){
var indication_subject1 = $('#indication_subject1').val();
var indication_subject2 = $('#indication_subject2').val();
if (indication_subject1 == indication_subject1)
{
$('#indication_subject2').prop('selectedIndex',0);// val = "" selected, or you can add alert('Can't select same value!')
}
});
$('#indication_subject2').change(function(){
var indication_subject1 = $('#indication_subject1').val();
var indication_subject2 = $('#indication_subject2').val();
if (indication_subject2 == indication_subject1)
{
$('#indication_subject1').prop('selectedIndex',0);
}
});
本文标签: javascriptnot allow select same value with two dropdownStack Overflow
版权声明:本文标题:javascript - not allow select same value with two dropdown - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742130976a2422156.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论