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

osh3o9ms  于 2022-12-22  发布在  jQuery
关注(0)|答案(5)|浏览(168)

我已经在网上搜索了一段时间,仍然找不到答案,我有三个下拉菜单在我的网站上。
我使用它们来接受用户的偏好,这样用户就可以控制结果的输出。
因此,我想知道是否有可能的价值被带出其他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>
v440hwme

v440hwme1#

这将禁用它,但不会删除它。
小提琴: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知道当它已经重置时要插入什么,因为做出了新的选择:)

dxpyg8gm

dxpyg8gm2#

这应该对你有用:

$(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();
            }
        });
    });
});`
xjreopfe

xjreopfe3#

你应该试试这个:

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

        });

你一定很辛苦吧。

balp4ylt

balp4ylt4#

我相信类似这样的东西可以解决上面给出的HTML问题:

var $selects = $("select");

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

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

x一个一个一个一个x一个一个二个x
这将禁用重复选项,但也可以轻松地删除它们。不过,您会遇到一个小问题,因为"Preference #"选项都有相同的值。我建议要么制作这些optgroup标签,要么完全删除这些值,并从一开始就将其标记为禁用...因为您不应该能够在第一时间单击它们。您可以在选项标签和分隔符here上找到更多信息。
Example

huus2vyu

huus2vyu5#

请尝试以下操作,它工作正常,没有问题。我还将所选选项标记为禁用,而不是隐藏其他下拉菜单。

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

相关问题