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个select字段的新行，条件是不应该有第一个下拉菜单值。

这意味着，如果我已经选择了类别，则无法在新创建的部分中再次选择类别。如果选择“与/或”，我想禁用相同的下拉字段。

请查看下面的图片以获取更多详细信息。

如上图所示，有两个区域，每个区域有3个下拉菜单。我的要求是，在第一部分中，如果选择“与”或“或”，那么我们将无法从第一个下拉菜单中进行选择（在存在图像类别中）。但是我们可以从第二部分中选择（存在图像流派），因为存在第三下拉选择字段，并且//未选择选项。选择“与/或”后，我们需要为该特定行的第一个选择字段设置只读选项。有人可以帮我吗？另外，笔记下拉列表是动态添加的。

Answer 1

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

如果我们更改另一个选择字段，则动态禁用选择字段条件

1 个答案: