Question

我正在使用三个具有相同选项的下拉选项。如果在其他下拉列表中选择了该项目，我想禁用该项目。我有两个下拉框的JQuery代码。即如果我在其他下拉列表中选择一个禁用的项目。但我在三次下拉中遇到麻烦。如果我先选择一个项目，那么项目在两个和三个中被禁用，但是当我选择第二个下拉列表时，第三个下拉列表仅禁用第二个下拉选择。我是jquery和AJAX的新手。请指导我。感谢您的帮助。

 <select id="select1" name="phoneusescategories">
                          <option value="" selected="selected">top-1 use </option>
                          <option value="1"> Games</option>
                          <option value="2"> Productivity</option>
                          <option value="3"> News</option>
                          <option value="4"> Shopping & services</option>
                          <option value="5"> Music</option>
                          <option value="6"> Social Networking</option>
                          <option value="7"> Browser</option>
                        </select>

                        <select id="select2" name="phoneusescategories">
                          <option value="" selected="selected">top-2 use </option>
                          <option value="1"> Games</option>
                          <option value="2"> Productivity</option>
                          <option value="3"> News</option>
                          <option value="4"> Shopping & services</option>
                          <option value="5"> Music</option>
                          <option value="6"> Social Networking</option>
                          <option value="7"> Browser</option>
                        </select>

                        <select id="select3" name="phoneusescategories">
                          <option value="" selected="selected">top-3 use </option>
                          <option value="1"> Games</option>
                          <option value="2"> Productivity</option>
                          <option value="3"> News</option>
                          <option value="4"> Shopping & services</option>
                          <option value="5"> Music</option>
                          <option value="6"> Social Networking</option>
                          <option value="7"> Browser</option>
                        </select>
    $(document).ready(function(){  
  $("select").change(function() {   
    $("select").not(this).find("option[value="+ $(this).val() + "]").attr('disabled', true);
  }); 
});

http://jsfiddle.net/sakura1/xzjdsusz/

Answer 1

如果您要启用和禁用选择的选项，则可能需要使用 prop() 而不是attr（）。

HERE： (jsFiddle DEMO)

我添加了此行，以防您在选择新选项

时删除其他已禁用的选项

$('select option').prop("disabled", false);

CODE SNIPPET

＆＃13;

$('select').on('change', function(){
    $('select option').prop("disabled", false);
    $("select").not(this).find("option[value="+ $(this).val() + "]").prop('disabled', true);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="select1" name="phoneusescategories">
                      <option value="" selected="selected">top-1 use </option>
                      <option value="Games"> Games</option>
                      <option value="2"> Productivity</option>
                      <option value="3"> News</option>
                      <option value="4"> Shopping & services</option>
                      <option value="5"> Music</option>
                      <option value="6"> Social Networking</option>
                      <option value="7"> Browser</option>
                    </select>

                    <select id="select2" name="phoneusescategories">
                      <option value="" selected="selected">top-2 use </option>
                      <option value="Games"> Games</option>
                      <option value="2"> Productivity</option>
                      <option value="3"> News</option>
                      <option value="4"> Shopping & services</option>
                      <option value="5"> Music</option>
                      <option value="6"> Social Networking</option>
                      <option value="7"> Browser</option>
                    </select>

                    <select id="select3" name="phoneusescategories">
                      <option value="" selected="selected">top-3 use </option>
                      <option value="Games"> Games</option>
                      <option value="2"> Productivity</option>
                      <option value="3"> News</option>
                      <option value="4"> Shopping & services</option>
                      <option value="5"> Music</option>
                      <option value="6"> Social Networking</option>
                      <option value="7"> Browser</option>
                    </select>

＆＃13;

Answer 2

好的，这是一个更新的答案

$('#select1,#select2,#select3').on('change', function(){
         var value =$.trim($(this).val());
    $('select option:contains("'+value+'")').attr('disabled','disabled');
});

New DEMO 它适用于游戏因此，将选项值更改为选项文本，如此

<option value="Games"> Games</option>

根据在其他下拉框中完成的选择禁用下拉项

2 个答案: