从下拉列表中选择最后一个值，并将其禁用以用于其他下拉列表 [英] Selecting the last value from the dropdown and disable it for other dropdowns

问题描述

我有3个下拉列表值：选择，一个，两个，三个以下是HTML。

I have 3 drop-downs with values: Select, One, Two, Three and following is the HTML.

<select class="dpdown" id="box1">
    <option value="Select">Select</option>
    <option value="One">One</option>
    <option value="Two">Tow</option>
    <option value="Three">Three</option>
</select> 
<select class="dpdown" id="box2">
    <option value="Select">Select</option>
    <option value="One">One</option>
    <option value="Two">Tow</option>
    <option value="Three">Three</option>
</select> 
<select class="dpdown" id="box3">
    <option value="Select">Select</option>
    <option value="One">One</option>
    <option value="Two">Tow</option>
    <option value="Three">Three</option>
</select> 

条件

1. 首先，jQuery函数应存储所有框中的当前值。


2. 如果用户从<$选择一个 c $ c>＃box1 ，然后它（一个）应该从所有其他框中禁用，如果两个再次从＃box1 中选择，然后从其他框中禁用两个并且一个启用。即最后一个值被禁用而不是所有值。


3. 另外需要注意的是，用户可以从任何下拉菜单中选择是box1 / box2还是box3。

1. First of all the jQuery function should store the current values from all the boxes.
2. If the user select One from #box1, then it (One) should be disabled from all other boxes, and if Two is selected from #box1 again, then Two is disabled from other boxes and One gets enabled. i.e. the last value is disabled not all the values.
3. Also to be noted that the user can select from any of the dropdowns whether it is box1/box2 or box3.

编辑

$(document).ready(function(){
    $('#box1').data('pre', $(this).val()); // added this line to get the pre value.
    $("select").change(function(e){
        var id = $(this).attr("id");
        var before_change = $(this).data('pre');
        alert(before_change); // alert shows blank values
    });
});

我想用jQuery做这件事。请帮忙。

I want to do this with jQuery. Please help.

推荐答案

喜欢这样：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="dpdown" id="box1">
    <option value="Select">Select</option>
    <option value="One">One</option>
    <option value="Two">Tow</option>
    <option value="Three">Three</option>
</select> 
<select class="dpdown" id="box2">
    <option value="Select">Select</option>
    <option value="One">One</option>
    <option value="Two">Tow</option>
    <option value="Three">Three</option>
</select> 
<select class="dpdown" id="box3">
    <option value="Select">Select</option>
    <option value="One">One</option>
    <option value="Two">Tow</option>
    <option value="Three">Three</option>
</select>

这篇关于从下拉列表中选择最后一个值，并将其禁用以用于其他下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！