Question

我有3个下拉值，包含Select，One，Two，Three，以下是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>

条件

首先，jQuery函数应存储所有框中的当前值。
如果用户从One选择#box1，那么应该从所有其他框中禁用One，并且从Two中选择#box1再次，然后从其他框中禁用Two并启用One。即最后一个值被禁用而不是所有值。
另外需要注意的是，用户可以从任何下拉菜单中选择是box1 / box2还是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做这件事。请帮忙。

Answer 1

尝试这样的事情：

＆＃13;

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

＆＃13;

<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">Two</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">Two</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">Two</option>
    <option value="Three">Three</option>
</select>

＆＃13;

我们的想法是将更改事件绑定到所有选择框。然后，当事件发生时，您启用所有选择框中的所有选项，然后您找到具有来自其他选择（当前this除外）的匹配值的选项并禁用它们。

Answer 2

你编码简单：

<script>
$('select').on('change', function() {
  $("select option").removeAttr('disabled');
  $("select option[value=" + $(this).val() + "]").attr('disabled','disabled')
});
</script>

DEMO

Answer 3

像这样：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

尝试这样的事情：

<强>已更新

var $selects = $(".dpdown").change(function() {
    var selectedValues = [];

    $.each($selects, function(index, select) {
        var value = $(select).val();
        if (value != "Select") {
            selectedValues.push(value);
        }  
    });

    $selects
       .find("option")
       .prop("disabled", false);

    $.each(selectedValues, function(index, value) {

        $selects
            .find("option[value='" + value +"']")
            .not(":selected")
            .prop("disabled", true);

    });
});

Demo

从下拉列表中选择最后一个值，并将其禁用以用于其他下拉列表

4 个答案: