根据其他下拉框中的选择，禁用下拉项目 [英] Disable dropdown item based on selection done on other dropdown box

问题描述

我正在使用三个下拉列表选项，具有相同的选项。如果在其他下拉菜单中选择了该项目，我想禁用一个项目。我有JQuery代码为两个下拉框工作。即如果我在其他下拉列表中选择一个禁用的项目。但是我在三次下载中遇到麻烦。如果我首先选择一个项目，则该项目在两个和三个中被禁用，但是当我选择第二个下拉菜单时，第三个下拉列表仅禁用第二个下拉列表选项。
我是jquery和AJAX的新手。
PLease指导我。
欣赏你的帮助。

I am working with three dropdown selects with same options. I want to disable an item if that item is selected in other dropdown. I have JQuery code working for two dropdown box. i.e. if I am selecting one item its disabled in other dropdown. But I am having trouble doing it for three dropdown. If I select one item in first that item is disabled in two and three but when I select second dropdown, third dropdown only disables second dropdown selection. I am new to jquery and AJAX. PLease guide me. Appreciate your help.

 <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/

推荐答案

你可能想使用 prop（） 而不是attr（），如果要启用和禁用

you might want to use prop() instead of attr() if you want to enable and disable the options of your select..

HERE： （jsFiddle DEMO）

HERE: (jsFiddle DEMO)

我添加了这一行，以防万一你想删除其他禁用的选项选择一个新选项

I added this line just in case you want to remove other disabled options whenever you select a new option

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

代码SNIPPET：

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

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

这篇关于根据其他下拉框中的选择，禁用下拉项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！