根据第一个下拉列表禁用第二个下拉选项

时间:2015-07-24 11:26:50

标签: javascript jquery html

我有两个动态下拉列表,但下拉列表的值和选项都相同。如果用户选择' 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执行此操作。

3 个答案:

答案 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>