从下拉列表中选择最后一个值，然后对其他下拉列表禁用它

Selecting the last value from the dropdown and disable it for other dropdowns

本文关键字：下拉列表 其他 然后 选择 最后一个      更新时间：2023-09-26

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

条件

  1. 首先，jQuery 函数应该存储所有框中的当前值。
  2. 如果用户从#box1中选择One，则应从所有其他框中禁用它（One），如果再次从#box1中选择Two，则从其他框中禁用Two，One启用。 即禁用最后一个值而不是所有值。
  3. 还需要注意的是，用户可以从任何下拉列表中选择它是 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来做这件事。请帮忙。

像这样：

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

尝试这样的事情：

var $selects = $('.dpdown').change(function() {
    var val = $(this).val();
    $selects
        .children().prop('disabled', false)
        .end().not(this)
        .find('[value="' + val + '"]').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">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>

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

你编码简单：

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

演示

尝试这样的事情：

更新 

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

演示

相关文章：