WedX - журнал о программировании и компьютерных науках

Несколько вариантов выбора HTML, все параметры отключают все остальные параметры

У меня есть такой элемент выбора на моей веб-странице:

<select id="difficulty"  name="difficulty" class="selectpicker"  multiple onchange="ChangeFilters()">
                                          <option value="-1" selected >All</option>
                                            <option value="0" >Facile</option> 
                                            <option value="1" >Normal</option>
                                            <option value="2"  >Difficile</option>
                                         </select>

Я хочу, чтобы когда пользователь выбирает параметры «Все» (значение = '-1'), если выбраны другие параметры, они становятся не выбранными, и если параметр «все» выбран, когда пользователь выбирает другие параметры, параметр «все» " стать не выбранным.

Я искал около 2 часов, и я не могу заставить это работать.

Я работаю с бутстрапом, и этот элемент выбора является элементом выбора, мой javascript не работает, когда я что-то пытаюсь..

Пожалуйста помоги !

РЕДАКТИРОВАТЬ :

Я разместил рабочий код в качестве ответа, спасибо за вашу помощь!

javascript html jquery twitter-bootstrap
22.05.2016

Ответы:


1

Что-то вроде этого?

        function ChangeFilters(){
            var selVal = $('#difficulty').val()[0];

            if(selVal == -1){
                $('#difficulty').attr('multiple',false);
            }else{
                $('#difficulty').attr('multiple',true);
            }
        }
22.05.2016
  • Когда все параметры отменены, val() возвращает null. Перед [0] должна быть нулевая проверка, иначе возникнет ошибка. 22.05.2016
  • @4castle Хорошо, я обновляю свой пост рабочей функцией. 22.05.2016
  • @ yuriy636 В этом решении первый щелчок (первый при изменении) не обновляет значения, мне нужно дважды щелкнуть, чтобы выбрать другие параметры, и только в первый раз после загрузки страницы, есть идеи? 22.05.2016
  • Вы имеете в виду, если вы выберете «Все», даже если он выбран после загрузки страницы? Пробовал другие вещи, и пока все работает хорошо. 22.05.2016
  • @ yuriy636 Обновлен мой пост, чтобы описать мои проблемы. 22.05.2016

    • 2

    С помощью этого поста Выбрать все/Отменить выбор всего в плагине Bootstrap Select< /а>

    Это полный рабочий код, который позволяет пользователю выбрать вариант «Все», 3 сложности или ничего:

    HTML:

    <select id="difficulty"  name="difficulty" class="selectpicker"  multiple onchange="ChangeFilters()">
                                      <option value="All" selected >Tous</option>
                                        <option value="0" >Facile</option> 
                                        <option value="1" >Normal</option>
                                        <option value="2"  >Difficile</option>
                                     </select>

    Javascript:

     //This need to be on your page load or other load event before the first onChange.
    $('#difficulty').data('allOptionIsSelected', true);

 function ChangeFilters() {

     if ($('#difficulty') != null) {
         if ($('#difficulty').val() != null) {


             var allOptionIsSelected = ($('#difficulty').val() || []).indexOf("All") > -1;
             function valuesOf(elements) {
                 return $.map(elements, function (element) {
                     return element.value;
                 });
             }

             if ($('#difficulty').data('allOptionIsSelected') != allOptionIsSelected) {
                 //User clicked 'All' option
                 if (allOptionIsSelected) {

                     $('#difficulty').selectpicker('val', ["All"]);
                     $('#difficulty').selectpicker('refresh');
                 } else {

                 }
             } else {
                 // User clicked other option

                 if ($('#difficulty').val().length != $('#difficulty').find('option').length) {
                     //user clicked other
                     // All options were selected, user deselected one option
                     // => unselect 'All' option
                     $('#difficulty').selectpicker('val', valuesOf($('#difficulty').find('option:selected[value!=All]')));
                     allOptionIsSelected = false;
                 }
             }
             $('#difficulty').data('allOptionIsSelected', allOptionIsSelected);

         }

         $('#difficulty').selectpicker('refresh');
     }


 }

    Если вы хотите, чтобы это работало с вашим проектом, измените «#difficulty» на идентификатор выбранного вами элемента управления.

    Спасибо @yuriy636 за предыдущую помощь :)

    23.05.2016
    Новые материалы
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..
    Учебные заметки: создание моего первого пакета Node.js
    Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..
    Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
    Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..
    ИИ в аэрокосмической отрасли
    Каждый полет – это шаг вперед к великой мечте. Чтобы это происходило в их собственном темпе, необходима команда астронавтов для погони за космосом и команда технического обслуживания..
    Для любых предложений по сайту: [email protected]