onclickがselectpicker multiselectドロップダウンで機能しない

私はselectpicker multiselectドロップダウンを持っています。私はオプションを選択すると 'onclick'を呼び出すことができません。しかし、これは通常のHTMLマルチプルドロップダウンで動作します。どのようにselectpickerで動作させるには？onclickがselectpicker multiselectドロップダウンで機能しない

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

出典

2017-07-04 coder1456

デベロッパーコンソールを使用してデバッグを試みましたか？ – Terrance00

はい、そこにメッセージが見つかりませんでした。 – coder1456

要素の選択を解除するとどうなりますか？ – C2486

私は少し下のドロップダウンリストに変更されました。基本的には、oldarrは、選択した項目の前のリストを格納する

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

：下にあなたのMyFunctionを変更すると

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

を。次に、選択したアイテムの最新のリストをnewarrに挿入します。そして、私たちは旧約聖書の中で何があるのかを比較します。このようにして、最新のクリックされたアイテムだけをフィルタリングできます。ユーザーが項目の選択を解除した場合は、newarをoldarに割り当てます。

出典

2017-07-04 07:30:11 Vlam

前の回答で述べたとおり、答えは部分的に機能します。しかし、私は選択されたすべてのオプションのリストの代わりに選択された最新のオプションだけを警告したい。私はselectpickerクラスなしで最新のオプションだけ警告することができます。 – coder1456

最後にクリックしたアイテムについてのみ警告するように変更しました。 – Vlam

それは動作します。これは私が探していたものです。ありがとう！ – coder1456

私はこれを行うにはjQueryを使用しています

は、ここでは、コードです。あなたは、ブートストラップから選択し使用しているため、それがないオプションとしてリストとして注文します、それはあなた

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

希望のために働いていたdidntのThatsなぜこのことができます..！

出典

2017-07-04 07:21:59 Prags

あなたのコードは動作しますが、私は少し違ったものを探しています。コードを実行すると、選択した最新のオプションのみを警告することがわかりますが、回答ではすべての選択されたオプションがリストとして返されます。これを修正することは可能ですか？ – coder1456

選択オプション

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>

か見つけるのjQueryを使用するを見つけるためにはforEachを使用し、これを試してみてください。

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

ホープHELを選択p :)

出典

2017-07-04 08:17:55 GuaHsu

onclickがselectpicker multiselectドロップダウンで機能しない

答えて

関連する問題