刪除已從另一個下拉菜單中選擇的下拉值

Question

我在網上搜索了一段時間，但仍然找不到答案，我的網站上有三個下拉菜單。

我使用它們來接受用戶偏好，以便用戶可以控制結果的輸出。

所以我想知道是否有可能從其他 2 個下拉列表中取出該值，如果它被選中。

例如，如果用戶在第一個中選擇電影，則不會在其他人中。

這是我的下拉菜單

<select id="pref1select">
<option value="P">Preference One</option>
    <option value="M">Movie</option>
    <option value="T">Tv</option>
    <option value="G">Games</option>
</select>
<select id="pref2select">
<option value="P">Preference Two</option>
    <option value="M">Movie</option>
    <option value="T">Tv</option>
    <option value="G">Games</option>
</select>
<select id="pref3select">
<option value="P">Preference Three</option>
    <option value="M">Movie</option>
    <option value="T">Tv</option>
    <option value="G">Games</option>
</select>

Answer 1

這將禁用它，但不會刪除它。
小提琴： http : //jsfiddle.net/p2SFA/1/

HTML：（添加.preferenceSelect類）和jQuery ：

 $(document).ready(function() { $(".preferenceSelect").change(function() { // Get the selected value var selected = $("option:selected", $(this)).val(); // Get the ID of this element var thisID = $(this).prop("id"); // Reset so all values are showing: $(".preferenceSelect option").each(function() { $(this).prop("disabled", false); }); $(".preferenceSelect").each(function() { if ($(this).prop("id") != thisID) { $("option[value='" + selected + "']", $(this)).prop("disabled", true); } }); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <select id="pref1select" class="preferenceSelect"> <option value="P">Preference One</option> <option value="M">Movie</option> <option value="T">Tv</option> <option value="G">Games</option> </select> <select id="pref2select" class="preferenceSelect"> <option value="P">Preference Two</option> <option value="M">Movie</option> <option value="T">Tv</option> <option value="G">Games</option> </select> <select id="pref3select" class="preferenceSelect"> <option value="P">Preference Three</option> <option value="M">Movie</option> <option value="T">Tv</option> <option value="G">Games</option> </select>

如果你想刪除它，你可能必須讓jQuery知道在它重置時要插入什么，因為做出了新的選擇:)

Answer 2

這應該適合你：

$(document).ready(function() {
    $(".preferenceSelect").change(function() {
        // Get the selected value
        var selected = $("option:selected", $(this)).val();
        // Get the ID of this element
        var thisID = $(this).attr("id");
        // Reset so all values are showing:
        $(".preferenceSelect option").each(function() {
            $(this).show();
        });
        $(".preferenceSelect").each(function() {
            if ($(this).attr("id") != thisID) {
                $("option[value='" + selected + "']", $(this)).hide();
            }
        });
    });
});`

Answer 3

鑒於上面的HTML ，我相信這樣的事情可以解決問題：

var $selects = $("select");

$selects.on("change", function(){
    var value = this.value;

    $("option[value='" + value +"']", $selects).prop("disabled", true);    
});

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <select id="pref1select"> <option value="P">Preference One</option> <option value="M">Movie</option> <option value="T">Tv</option> <option value="G">Games</option> </select> <select id="pref2select"> <option value="P">Preference Two</option> <option value="M">Movie</option> <option value="T">Tv</option> <option value="G">Games</option> </select> <select id="pref3select"> <option value="P">Preference Three</option> <option value="M">Movie</option> <option value="T">Tv</option> <option value="G">Games</option> </select>

這會禁用重復的選項，但刪除它們也很容易。 不過，您會遇到一個小問題，因為“首選項 #”選項都具有相同的值。 我建議要么制作這些optgroup標簽，要么完全刪除這些值並從一開始就將它們標記為禁用...因為您一開始就不應該單擊它們。 您可以在選項標簽和分隔符上找到更多信息，請點擊此處。

例子

Answer 4

你應該試試這個：

  $(".preferenceSelect").on("change", function () {
            $(".preferenceSelect option").prop("disabled", false);
            var selectPref = $("option:selected", $(this)).val();
            var selectId = $(this).prop("id");
            $(".preferenceSelect option").each(function () {
                $(this).show();
            });
            $(".preferenceSelect").each(function () {
                if ($(this).prop("id") != selectId) {
                    $("option[value='" + selectPref + "']", $(this)).prop("disabled", true);
                }
            });

        });

這一定適合你。

Answer 5

請嘗試以下工作正常且沒有問題的方法。 我還將所選選項標記為禁用，而不是從其他下拉列表中隱藏。

$( function() {
    courC();
});

function courC(){   
    var previous;

    $(".pSel").on('focus', function () {
        previous = this.value; 
    }).change(function() {
        var selected = $("option:selected", $(this)).val();
        var thisID = $(this).attr("id");

        $(".pSel option").each(function() {
            $(this).show();
        });

        $(".pSel").each(function() {
            var otid=$(this).attr("id");
            if (otid != thisID) {
                if( $('#'+otid).val() == selected){ $('#'+otid).val(''); } // this is required when you are viewing data once again after the form submission
                $("option[value='" + selected + "']", $(this)).attr("disabled", true);
            }

            $("option[value='" + previous + "']", $(this) ).attr("disabled", false); // this will help to reset the previously selected option from all dropdown

        });

        previous =  $('#'+thisID).val();
    });
}