Semantic UI multi-select dropdown prevent element selection

Question

I am having a dropdown with 4 elements such as

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

Here, user has to be allowed to select 'All' only when there is no element in it. If it has at least one element say 'Cu' in it & if user is selecting 'All' then the selection has to be prevented and 'All' will be removed from the dropdown.

<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

But, while doing so, the elements are getting removed from the dropdown itself.

What is the mistake I'm making here ?

score 0 · Answer 1 · answered Apr 09 '20 at 06:49

0

get number of options in the list by using $('#input1 option').length; then apply your conditions according to your logic. There you will get 5 for your given code. Let me knw for more detials

answered Apr 09 '20 at 06:49

Shohanur

106
7

limco · Accepted Answer · 2020-04-09T07:35:37.313

0

Your are using the wrong parameters in your logic. This solution should work.. simply change your onChange params.

The dropdown onChange gives you: 1) array of all options that have been selected 2) currently selected value

So you want to do this:

$('#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')
            }

        }
    });

Fiddle: https://jsfiddle.net/yumxj47v/

edited Apr 09 '20 at 07:35

answered Apr 09 '20 at 07:25

limco

440
6
16

Here `$('#du_select').dropdown('clear').dropdown('set selected',value)` is making the `onChange` function to be called multiple times. – Dinesh Apr 09 '20 at 09:04
Sure, but that is again, your own code and error. This answer solved your question of: "the elements are getting removed from the dropdown itself. What is the mistake I'm making here ?", which is your incorrect parameter – limco Apr 09 '20 at 10:40
function being called multiple times is not the cause of why the items were getting removed from the dropdown, when you make a selection. – limco Apr 09 '20 at 10:41

score 0 · Answer 3 · answered Apr 09 '20 at 07:31

Upon exploring the Semantic-UI documentation, I found a way to solve it, by providing the 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

you were just using the wrong parameters in your logic. check my answer, it simply changes your param you are using — limco, Apr 09 '20 at 07:33

Semantic UI multi-select dropdown prevent element selection

3 Answers3