我有两个动态下拉列表,但下拉列表的值和选项都相同。如果用户选择' apple'从第一次下拉菜单开始,第二次下拉菜单的苹果选项将被禁用(使用javascript)。简而言之,用户无法从两者中选择相同的值。
//first drop down
<select name="fruit1">
<option value="1">Apple</option>
<option value="2">Mango</option>
</select>
//second dropdown
<select name="fruit2">
<option value="1">Apple</option>
<option value="2">Mango</option>
</select>
我尝试过使用jQuery:
function witness()
{
var op=document.getElementById("witness1").value;
$('option[value='+op+']').prop('disabled', true);
}
但是,这两个下拉列表的值都被禁用,如果我选择芒果,那么苹果将无法启用它仍然被禁用。我知道我没有传递id所以两个下拉值都被禁用但我应该在哪里通过?
如果用户选择苹果,那么在第二个下拉菜单中将禁用苹果,我想使用Javascript或jQuery执行此操作。
答案 0 :(得分:3)
小提琴:https://jsfiddle.net/3pfo1d1f/
要获得您之后的功能,您需要在第一个下拉列表中挂钩change
事件,以便在第二个下拉列表中禁用匹配元素。
我还将第二个下拉列表中的第一个元素初始化为禁用(默认情况下在第一个下拉列表中选择)
使用jquery:
HTML:
<!-- first dropdown -->
<select id="fruit1">
<option value="1">Apple</option>
<option value="2">Mango</option>
</select>
<br /> <br />
<!-- second dropdown -->
<select id="fruit2">
<option value="1" disabled>Apple</option>
<option value="2">Mango</option>
</select>
JQuery的:
$('#fruit1').on( "change", function() {
var op = $( this ).val();
$('#fruit2 option').prop('disabled', false);
$('#fruit2 option[value='+op+']').prop('disabled', true);
});
无论你在两个下拉列表中有多少选项
,这仍然有用答案 1 :(得分:2)
试试这个:
HTML:
<select id='fruit1' onchange="witness();">
<option selected></option>
<option value="1">Apple</option>
<option value="2">Mango</option>
</select>
<select id='fruit2'>
<option selected></option>
<option value="1">Apple</option>
<option value="2">Mango</option>
</select>
JQuery的:
function witness(){
$("#fruit2 option").each(function(){
if($("#fruit1 option:selected").val() == $(this).val())
$(this).attr("disabled", "disabled");
else
$(this).removeAttr("disabled");
});
}
你可以在这里看到一个工作例子: https://jsfiddle.net/mqjxL4n0/
答案 2 :(得分:1)
<select name="firstselect" id="firstselect">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
</select>
<select name="secondselect" id="secondselect">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
</select>
<script>
$(document).ready(function(){
$('#firstselect').change(function(){
var firstselected = $(this).val();
if(firstselected ){
$('#secondselect option').each(function(){
$(this).prop('disabled', false);
if($(this).val()==firstselected )
$(this).prop('disabled', true);
});
}
else {
$('#secondselect option').each(function(){
$(this).prop('disabled', false);
});
}
});
});
</script>