Onclick funktioniert nicht mit selectpicker Multiselect-Drop-Down-

Ich habe ein selectpicker Multiselect-Dropdown-Menü. Ich kann 'onclick' nicht aufrufen, wenn ich eine Option auswähle. Aber das funktioniert mit dem normalen html multiple dropdown. Wie funktioniert es mit Selectpicker?Onclick funktioniert nicht mit selectpicker Multiselect-Drop-Down-

Hier ist der Code:

<!DOCTYPE html> 
    <html> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 

     <link rel="stylesheet" 
     href="//cdnjs.cloudflare.com/ajax/libs/bootstrap- 
     select/1.6.3/css/bootstrap-select.min.css" /> 
     <link rel="stylesheet" href="https: 
     //maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <script 
     src= 
     "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
     </script> 
     <script 
     src= 
     "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 
> 
     </script> 
     <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap- 
     select/1.6.3/js/bootstrap-select.min.js"></script> 
    </head> 
    <body> 

     <form action="/action_page.php"> 
     <select class="selectpicker" name="cars" multiple> 
     <option value="volvo" onclick="myFunction(this)">Volvo</option> 
     <option value="bmw" onclick="myFunction(this)">Bmw</option> 
     <option value="opel" onclick="myFunction(this)">Opel</option> 
     <option value="audi" onclick="myFunction(this)">Audi</option> 
     </select> 
     <input type="submit"> 
     </form> 

     <p>Hold down the Ctrl (windows)/Command (Mac) button to select 
     multiple options.</p> 

     <script type="text/javascript"> 
     function myFunction(option) { 

      if (option.selected) { 
      alert(option.text); 
      } 
     } 

     </script> 
    </body> 

</html>

Quelle

2017-07-04 coder1456

Haben Sie versucht das Debuggen des Entwickler-Konsole? – Terrance00

Ja, aber ich konnte dort keine Nachricht finden. – coder1456

was passiert, wenn Sie ein Element abwählen? – C2486

Ich habe das Dropdownlist ein bisschen unten geändert:

<select class="selectpicker" onchange="myFunction()" id="cars" name="cars" multiple> 
    <option value="volvo">Volvo</option> 
    <option value="bmw">Bmw</option> 
    <option value="opel">Opel</option> 
    <option value="audi">Audi</option> 
</select>

Dann wird Ihr myFunction unten geändert:

var oldarr = []; 
var newarr = []; 
function myFunction() { 
    if ($("#cars option:selected").length == 1) { 
     oldarr = []; 
     oldarr.push($("#cars option:selected").val()); 
     alert($("#cars option:selected").val()); 
    } 
    else { 
     newarr = []; 
     $("#cars option:selected").each(function(i){ 
      newarr.push($(this).val()); 
     }); 
     newitem = $(newarr).not(oldarr).get(); 
     if (newitem.length > 0) { 
      alert(newitem[0]); 
      oldarr.push(newitem[0]); 
     } 
     else { 
      oldarr = newarr; 
     } 
    } 
}

Grundsätzlich ist die oldarr die vorherige Liste der ausgewählten Elemente speichern. Dann fügen wir die neueste Liste ausgewählter Artikel in newarr ein. Dann vergleichen wir, was im Newarr ist, aber nicht im Oldarr. Auf diese Weise können wir nur das zuletzt angeklickte Element herausfiltern. Wählt der Benutzer stattdessen ein Element ab, weisen wir den newarr nur oldarr zu.

Quelle

2017-07-04 07:30:11 Vlam

Wie ich bereits in der vorherigen Antwort erwähnt, arbeitet die Antwort teilweise. Aber ich möchte nur die letzte ausgewählte Option anstelle der Liste aller ausgewählten Optionen anzeigen. Ich kann jedoch nur die neueste Option ohne Selectpicker-Klasse warnen. – coder1456

Haben letzten geklickten Artikel nur Alarm geändert. – Vlam

Es funktioniert. Das ist, was ich gesucht habe. Vielen Dank! – coder1456

ich verwendet habe jQuery, dies zu tun. da Sie von Bootstrap-select verwenden, sie als geordnete Liste wird nicht als Optionen, das ist, warum es für Sie

$(function() { 
 

 
    $('.selectpicker').on('change', function(){ 
 
    var selected = $(this).find("option:selected").text(); 
 
    alert(selected); 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" 
 
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" /> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
 
</script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script> 
 

 
<form action="/action_page.php"> 
 
<select class="selectpicker" name="cars" multiple> 
 
<option value="volvo" >Volvo</option> 
 
<option value="bmw">Bmw</option> 
 
<option value="opel">Opel</option> 
 
<option value="audi">Audi</option> 
 
</select> 
 
<input type="submit"> 
 
</form> 
 

 
<p>Hold down the Ctrl (windows)/Command (Mac) button to select 
 
multiple options.</p>

this helps gearbeitet didnt ..!

Quelle

2017-07-04 07:21:59 Prags

Dein Code funktioniert, aber ich suche etwas anderes. Wenn Sie meinen Code ausführen, können Sie sehen, dass ich ausgewählt nur die letzte Option alarmieren, aber in Ihrer Antwort gibt es alle ausgewählten Optionen als eine Liste. Ist es möglich, dies zu ändern? – coder1456

dies versuchen, verwenden forEach ausgewählte Option

var selectEl = document.querySelector('.selectpicker'); 
 
var options = document.querySelectorAll('.selectpicker option'); 
 
selectEl.addEventListener('change', function() { 
 
    options.forEach(function(option) { 
 
     if(option.selected) { alert(option.value); } 
 
    }) 
 
})

<select class="selectpicker" name="cars" multiple> 
 
<option value="volvo">Volvo</option> 
 
<option value="bmw">Bmw</option> 
 
<option value="opel">Opel</option> 
 
<option value="audi">Audi</option> 
 
</select>

oder jQuery zu finden verwenden finden: wählen

$('.selectpicker').change(function() { 
 
    var thisValue = $(this).find(':selected').attr('value') ; 
 
    alert(thisValue); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<select class="selectpicker" name="cars" multiple> 
 
<option value="volvo">Volvo</option> 
 
<option value="bmw">Bmw</option> 
 
<option value="opel">Opel</option> 
 
<option value="audi">Audi</option> 
 
</select>

Hoffnung hel p :)

Quelle

2017-07-04 08:17:55 GuaHsu

Onclick funktioniert nicht mit selectpicker Multiselect-Drop-Down-

Antwort

Verwandte Themen