语义 UI 多选下拉菜单阻止元素选择

Question

我有一个包含 4 个元素的下拉列表，例如

'All', 'Fi', 'Cu', 'Common'. 

这里，只有当其中没有元素时，才允许用户选择'All'。如果其中至少有一个元素说'Cu'，并且如果用户选择'All'，则必须阻止选择并且'All'将从下拉列表中删除。

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"></script>

<div style="padding:10px;width:200px;">
    <select id="du_select" class="ui fluid dropdown" name="du_graph_types" multiple="">
        <option value="">Select DU</option>
        <option value="all">All</option>
        <option value="copper">Copper</option>
        <option value="fiber">Fiber</option>
        <option value="common">Common</option>
    </select>
</div>

<script type="text/javascript">
    $('#du_select').dropdown({
        onChange: function(value, text, $selectedItem) {
            // custom action
            if (value.length > 1 && value.includes('all')) {
                const index = value.indexOf('all');
                if (index > -1) {
                    value.splice(index, 1);
                }
                console.log('sel_items : ' + value)
                $('#du_select').dropdown('clear').dropdown('set selected',value)
                alert('Before selecting "All", clear the existing DU type')
            }

        }
    });

</script>

JSFiddle

但是，在这样做的同时，元素会从下拉列表本身中删除。

我在这里犯了什么错误？

Answer 1

您在逻辑中使用了错误的参数。该解决方案应该可以工作。只需更改您的 onChange 参数即可。

onChange 下拉菜单为您提供： 1) 已选择的所有选项的数组 2) 当前选择的值

所以你想这样做：

$('#du_select').dropdown({
        onChange: function(selected, value) {
    console.log(value)
    console.log(selected)
            // custom action
            if (selected.length > 1 && selected.includes('all')) {
                const index = selected.indexOf('all');
                if (index > -1) {
                    selected.splice(index, 1);
                }
                console.log('sel_items : ' + selected)
                $('#du_select').dropdown('clear').dropdown('set selected',value)
                //$('#du_select').;
                alert('Before selecting "All", clear the existing DU type')
            }

        }
    });

小提琴：https://jsfiddle.net/yumxj47v/

Answer 2

使用 $('#input1 option').length; 获取列表中的选项数量，然后根据您的逻辑应用您的条件。在那里，您将获得 5 的给定代码。让我知道更多细节

Answer 3

在探索 Semantic-UI 文档后，我找到了解决它的方法，即提供 custom select action。

<script type="text/javascript">
    $('#du_select').dropdown({
        action: function(text, value) {
            // nothing built in occurs
            existing_elems = $(this).dropdown("get value")
            //console.log(value)
            if (existing_elems.includes('all')) {
                alert('No options allowed to add, while "All" is already selected')
            } else if (existing_elems.length > 0 && value == 'all') {
                alert('Before selecting "All", clear the existing DU type')
            } else {
                $(this).dropdown('set selected',value)
            }
            $(this).dropdown('hide')
        }
    });

</script>

JSFiddle