时间戳

首页 > 解决方案 > 语义 UI 多选下拉菜单阻止元素选择

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

问题描述

我有一个包含 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

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

我在这里犯了什么错误？

标签： javascriptsemantic-ui

解决方案

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

推荐阅读