javascript - 动态禁用选择字段条件是如果我们更改另一个选择字段

Question

<div class="radio">
    <input type="radio" id="test2" name="specific_content" value="2">
    <label for="test2" class="parent_row">
        <div class="col-md-4">
            <select class="form-control" name="content_form[]">
                <option value="" selected disabled hidden>Select</option>
                <option value="category">Category</option>
                <option value="genre">Genre</option>
                <option value="cast">Cast</option>
            </select>
        </div>
        <div class="col-md-4">
            <div class="select-btn">
                <select name="content_type[]" multiple class="form-control">
                </select>
            </div>
        </div>
        <div class="col-md-4">
            <select class="form-control condition-section" name="conditions[]">
                <option value="" selected disabled hidden>Select</option>
                <option value="1">AND</option>
                <option value="2">OR</option>
            </select>
        </div>
    </label>
</div>

Jquery

    $(document).on('change', "select[name='conditions[]']",  function(e){ 
        if($(this).val() != null && $(this).val() != "Select" && $(this).val() != "") {

        var selectedCat = [];
        $("select[name='content_form[]']").each(function(e){   
            if($(this).val()) {
                selectedCat.push($(this).val()); 
            }                             
        }); 

        //alert(JSON.stringify(selectedCat));

        var row = '<label class="parent_row">';
        row += '<div class="col-md-4">';
        row += '<select class="form-control" name="content_form[]">';
        row += '<option value="" selected disabled hidden>Select</option>';

        var unselectedCatPresent = false;
        if(selectedCat.indexOf('category') == -1) {
            row += '<option value="category">Category</option>';
            unselectedCatPresent = true;
        }
        if(selectedCat.indexOf('genre') == -1) {
            row += '<option value="genre">Genre</option>';
            unselectedCatPresent = true;
        }
        if(selectedCat.indexOf('cast') == -1) {
            row += '<option value="cast">Cast</option>';
            unselectedCatPresent = true;
        }   

        row += '</select>';
        row += '</div>';
        row += '</label>';

        if(unselectedCatPresent) {
            $(this).closest('label.parent_row').after(row);  
        }            
    } else if($(this).val() == "") {
        $(this).closest('label.parent_row').nextAll().remove();  
    }
});    

以上是我的 HTML 和 jQuery 代码。

在更改 AND/OR 下拉列表时，我正在创建一个包含所有 3 个选择字段的新行，条件是第一个下拉值不应该存在。

这意味着如果我已经选择了类别，那么我不能在新创建的部分中再次选择类别。如果选择了 AND/OR，我想禁用相同的下拉字段。

请查看下图了解更多详情。

如您在上图中所见，有两个部分，每个部分有 3 个下拉菜单。我的要求是，在第一部分中，如果选择了 AND/OR，那么我们不能从第一个下拉菜单中选择(在图像类别中)。但是我们可以从第 2 部分(在图像中显示流派)中进行选择，因为在第 3 个下拉列表中选择字段存在和/或未选择选项。选择 AND/OR 后，我们需要为该特定行的第一个选择字段设置只读选项。谁能帮我解决这个问题？此外，注释下拉列表是动态出现的。

Answer 1

您似乎不希望在新创建的两个组合的行的第一个组合中选择相同的值...我建议在动态生成选择字段时不要添加已经选择的选项以前的组合....为此，您需要维护已选择值的列表