Semanti c UI multi-select выпадающий список предотвращает выбор элемента - PullRequest
Новая
       11

Semanti c UI multi-select выпадающий список предотвращает выбор элемента

2 голосов
/ 09 апреля 2020

У меня выпадающий список с 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

Но при этом элементы удаляются из самого раскрывающегося списка.

Какую ошибку я здесь делаю?

Ответы [ 3 ]

0 голосов
/ 09 апреля 2020

Вы используете неправильные параметры в вашей логике c. Это решение должно работать .. просто измените свои параметры 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/

0 голосов
/ 09 апреля 2020

Изучив документацию Semanti c -UI, я нашел способ решить ее, предоставив пользовательское действие выбора . 

<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

0 голосов
/ 09 апреля 2020

получите количество опций в списке, используя $ ('# input1 option'). Length; , затем примените ваши условия в соответствии с вашей логикой c. Там вы получите 5 за ваш данный код. Позвольте мне знать больше деталей

...