Mam multiselect selectpicker. Nie jestem w stanie wywołać "OnClick", gdy wybieram dowolną opcję. Ale to działa z normalnym rozwijaniem HTML. Jak sprawić, by działało z SelectPicker?

Oto kod:

 <!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>
2
coder1456 4 lipiec 2017, 10:05

3 odpowiedzi

Najlepsza odpowiedź

Zmieniłem broń poniżej:

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

Następnie zmodyfikowany poniżej:

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

Zasadniczo Lamar zapisze poprzedni listę wybranych elementów. Następnie wkładamy najnowszą listę wybranych elementów do Nowarry. Następnie porównujemy, co jest w Nowej, ale nie w Darerardzie. W ten sposób możemy filtrować tylko najnowszy klikający element. Jeśli użytkownik Zamiast tego odznacza element, po prostu przypisujemy Nowary do Stolarra.

2
Vlam 5 lipiec 2017, 00:32

Użyłem Jquery, aby to zrobić. Ponieważ używasz wybierz z Bootstrap, zostanie zamówiony jako lista nie jako opcje, dlatego nie zadziałał dla Ciebie

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

Mam nadzieję że to pomoże..!

0
Prags 4 lipiec 2017, 07:21

Spróbuj tego, użyj Foreach, aby znaleźć wybraną opcję

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>

Lub użyj jQuery Znajdź: Wybierz

$('.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>

Hope Help :)

1
GuaHsu 4 lipiec 2017, 08:23