使用 jQuery 禁用附加下拉列表中的选项

Posted 2023-03-11

【中文标题】使用 jQuery 禁用附加下拉列表中的选项

【英文标题】：Disable options in an appended drop-down list using jQuery

【发布时间】：2015-06-12 19:37:58

【问题描述】：

我正在使用 Yii2 php 框架，这是我显示第一个下拉列表的方式：

<?php 
    $deductions = PayrollItems::find()->where(['store_id' => $session['store_id']])->orwhere(['store_id' => null])->where(['payroll_type' => 'Deduction'])->all();
    $deductionslistData = ArrayHelper::map($deductions,'payroll_items_id', 'payroll_name');
    echo $form->field($model2, 'deduction_item_id')->widget(Select2::classname(), [
        'data' => $deductionslistData,
        'options' => ['placeholder' => 'Select a Deduction ', 'id' => 'deduction_item'],
        'pluginOptions' => [
            'allowClear' => true
        ],
    ]);
?>

下面是追加新下拉列表的脚本函数：

function addDeductionItem()   
    var count = $('#count2').val();
    if($('#deduction_item').val()=="" || $('#deduction_item_' + count).val()=="")
        alert("Please fill in the earning item field first!");
    
    else
        count++ ;
        $('#count2').val(count);

        $.ajax(
            url: 'index.php?r=payslip/deductions',
            dataType: 'json',
            method: 'GET',
            data: ,
            success: function (data, textStatus, jqXHR) 
                $("#deduction_item_" + count).append($("<option></option>").html(""));
                //$("#deduction_item_" + count).append($("<option></option>").val('add item').html("Add New Item"));
                for(i=0; i<data.length;i++)
                                      
                    $("#deduction_item_" + count).append($("<option></option>").val(data[i][1]).html(data[i][0]));                        
                
            ,
            error: function (jqXHR, textStatus, errorThrown) 
                console.log('An error occured!');
                alert('Error in ajax request');
            
        );

        var deduction = '<tr id="row_' + count +'"><td><select class="form-control input-md" placeholder="Select a Deduction " style="width: 100%; cursor: pointer;" data-krajee-select2="select2_6789bf5d" tabindex="-1" id="deduction_item_' + count + '" name="deduction_item_' + count + '"></select></td><td><input class="form-control" type="text" id="deduction_unit_' + count + '"  name="deduction_unit_' + count + '"></td><td><input class="form-control" type="text" id="deduction_amount_' + count + '" name="deduction_amount_' + count + '" onchange="_getTotalDeduction(id)"></td>';

        deduction += '<td><a style="cursor:pointer" class="ibtnDel"><i class="fa fa-times">&nbsp;&nbsp;</a></td></tr>';    

        $("#deduction_items").append(deduction);

        $("#deduction_items").on('click','.ibtnDel',function()
            $(this).closest('tr').remove();
        );

        $('#row_' + count + ' select').select2(); 
            

我有一个下拉列表，例如它有 3 个选项，然后我选择选项 01。现在，当我添加一个新的下拉列表时（在我的例子中，通过单击“添加扣除项目”按钮） , 附加下拉列表中的选项 01 将被禁用。

整个想法是，当我在第一个下拉列表中选择一个选项时，该选择的选项现在应该在附加的下拉列表中被禁用，依此类推。

我已经在互联网上搜索了这个问题。我找到了一些，但它们对我不起作用，因为我的问题与我发现的问题并不相似。

我找到并尝试了这个小提琴：http://jsfiddle.net/rajan222000/yww8apn9/1/ 但仍然不适合我。我注意到它有静态数量的下拉列表。我尝试var deductionID = 'deduction_item_' + count + ''; 使其动态化，但我不知道为什么它不起作用。

我真的需要你的帮助。

【问题讨论】：

你能给我解释清楚吗：When I select an option in the first drop-down list, that selected option should be now disabled in the appended drop-down list, and so on.

我有一个下拉列表，例如它有 3 个选项，然后我选择选项 01。现在，当我添加一个新的下拉列表时（通过单击按钮“添加扣除项目" 在我的情况下），附加下拉列表中的选项 01 将被禁用。

所以，如果它不包含在新的下拉列表中，它就不起作用，对吧？

你是什么意思不起作用？你是说残疾人？它将不再起作用，因为它将被禁用。

让用户在第一个下拉列表中选择项目 A，在第二个下拉列表中您希望显示项目 A，但用户不应该选择它，对吗？我建议如果我们在第二个下拉列表中完全不包括项目 A 怎么办？

【参考方案1】：

如果我理解正确，那么您需要获取已生成下拉列表的所有选定值并在新创建的下拉列表中禁用它。

无需任何代码重构，您需要启动一个简单的 for 循环并禁用新下拉列表中的所有选定值。

将这个添加到 Ajax 调用中成功函数的末尾应该可以解决问题：

for(var c=count-1; c>=0; c--) 
    var sel = $("#deduction_item_" + c).val();
    $("#deduction_item_" + count).find("option[value'"+sel+"']").prop('disabled', true);