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

【问题标题】：Dynamically disable the select field condition is if we change another select field动态禁用选择字段条件是如果我们更改另一个选择字段
【发布时间】：2018-09-28 10:37:40
【问题描述】：

<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 选项未选择。一旦我们选择了 AND/OR，我们需要为该特定行的第一个选择字段设置只读选项。有人可以帮我吗？此外，笔记下拉菜单是动态的。

【问题讨论】：

这里的内容有点多，无法快速理解。你能举一个小例子来加快速度吗？对于初学者，我制作了一个 JSFiddle，但这并没有多大帮助...jsfiddle.net/xpvt214o/853695
我可以制作视频分享给你吗？
也许你可以用一些更清晰的步骤解释你想要发生的事情..从头到尾..
在所有这些解释之后，看起来最好的方法是从选项中删除所有禁用和隐藏的属性。首先，并非所有浏览器都支持它们，其次，禁用的选项不会传递给服务器，这可能会扰乱服务器端验证，因为索引 0 可能具有不同的含义。例如：用户从未选择条件，但您的服务器将“AND”作为选定值，因为正确的选项被禁用，并且选项 1 将被传递而不是真正的选择。
@Teemu，我们可以设置只读选项吗，因为只读值将发送到服务器。

标签： javascript jquery

【解决方案1】：

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

【讨论】：