HTML selectpicker mehrere Optionen „alle“ deaktivieren Sie alle anderen Optionen

Question

ich in meiner Web-Seite ein Auswahl Aufnehmelements wie dieses:

<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> 

Ich möchte, dass, wenn der Benutzer die „alle“ Optionen wählen (Wert = '-1'), wenn andere Optionen ausgewählt sind, werden sie nicht ausgewählt, und wenn die Option Alle ausgewählt ist, wenn der Benutzer eine andere Option auswählt, wird die Option "Alle" nicht ausgewählt.

Ich habe gesucht wie 2 Stunden und ich kann das nicht funktionieren.

ich mit Bootstrap arbeiten und das select-Element ist ein selectpicker Element, mein Javascript funktioniert nicht, wenn ich etwas versuchen ..

Bitte um Hilfe!

EDIT:

Ich stellte den Arbeitscode als Antwort, vielen Dank für Ihre Hilfe!

Answer 1

Mit Hilfe dieses Postens Select all/Unselect all in Bootstrap Select plugin

Dies ist der volle Arbeitscode, der dem Benutzer ermöglichen, die Option Alle, 3 Schwierigkeiten zu wählen, oder nichts:

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'); 
    } 


} 

Wenn Sie dies mit Ihrem Projekt arbeiten möchten, ändern Sie "#difficulty" in die ID des ausgewählten Steuerelements.

Danke an @ yuriy636 für die vorherige Hilfe :)

Answer 2

So ähnlich?

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

      if(selVal == -1){ 
       $('#difficulty').attr('multiple',false); 
      }else{ 
       $('#difficulty').attr('multiple',true); 
      } 
     }