删除已从另一个下拉菜单中选择的下拉值 [英] Remove a dropdown value that has been selected from another dropdown menu

问题描述

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

I have searching the web for a while and still I cant find an answer, I have three drop-down menus on my site.

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

I use them for accepting user preferences so the user can control the output of results.

所以我想知道是否有可能从其他 2 个下拉列表中删除该值，如果它被选中.

So I want to know if its possible for the value to be taken out of the other 2 dropdowns if its selected in one.

例如，如果用户在第一个中选择电影，则不会在其他中.

这是我的下拉菜单

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

推荐答案

这将禁用它，但不会删除它.
小提琴:http://jsfiddle.net/p2SFA/1/

This will disable it, but not remove it.
Fiddle: http://jsfiddle.net/p2SFA/1/

HTML:(添加了 .preferenceSelect 类)和 jQuery:

HTML: (Added .preferenceSelect class) and 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 知道在它重置时要插入什么，因为做出了新的选择:)

If you want it removed, you will probably have to make jQuery know what to insert when it has reset because a new choice is made :)

这篇关于删除已从另一个下拉菜单中选择的下拉值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！