删除已从另一个下拉菜单中选择的下拉值

Posted 2023-05-08

【中文标题】删除已从另一个下拉菜单中选择的下拉值

【英文标题】：Remove a dropdown value that has been selected from another dropdown menu

【发布时间】：2014-06-12 15:47:29

【问题描述】：

我在网上搜索了一段时间，但仍然找不到答案，我的网站上有三个下拉菜单。

我使用它们来接受用户偏好，以便用户可以控制结果的输出。

所以我想知道如果它在一个中被选中，是否有可能将该值从其他 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>

【参考方案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 知道在它重置时要插入什么，因为做出了新的选择:)

【讨论】：

在这种情况下你不应该使用attr：***.com/questions/5874652/prop-vs-attr

我们都这样做 =) 只是想我会指出来让你知道，看起来你已经处理好了。

@AndreasStorvikStrauman 如果您选择值然后更改它，它确实工作只有一个问题，两个值仍然被其他值阻止任何想法？

@AndreasStorvikStrauman 刚刚注意到一个问题，当您将此代码添加到我的示例时，当您从 pref 3 中选择时，它不会禁用 pref 1 中选择的值

它适用于fiddle。确定你实施对了吗？我也确实解决了以前的问题。

【参考方案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();
            
        );
    );
);`

【参考方案3】：

你应该试试这个：

  $(".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);
                
            );

        );

这一定适合你。

【参考方案4】：

鉴于上面的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>

这会禁用重复选项，但也可以轻松更改以删除它们。不过，您会遇到一个小问题，因为“Preference #”选项都具有相同的值。我建议要么制作这些optgroup 标签，要么完全删除这些值并从一开始就将它们标记为禁用......因为你不应该首先点击它们。您可以在选项标签上找到更多信息，并回答here 的分隔符。

Example

【参考方案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();
    );