jQuery eachを使って選択されたセレクトボックス複数の要素を指定する方法

2023年2月12日

環境
jquery 3.6.3
Google Chrome 109.0.5414.120
Windows10 Home 64bit

書式
1.ボタンのイベント定義
$(“.セレクタクラス名").on(“click",function(){処理コード})

2.セレクトボックスの複数要素を選択する
$(“#セレクトボックスのID名　option:selected").each(function(index,ele){処理コード})
3.セレクトボックスの複数属性を指定する
<select id="xxx" multiple>option要素</select>

使用例

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(function(){
  $(".btnSel").on("click", function() {
    //コンソールに選択された要素を選択
    $("#city option:selected").each(function(index,value){
       alert($(value).text() + "***" + index);
     });
    });
});
</script>
</head>
<body>
  <select id="city" multiple>
    <option selected="selected">都道府県</option>
    <option>東京</option>
    <option>大阪</option>
    <option>福岡</option>
    <option>横浜</option>
  </select>
  <p>
  <button class= "btnSel" >選択</button> </p>
</body>
</html>

実行結果
「大阪」と「福岡」を選択して「選択」ボタンを押すと、
「大阪***0」と「福岡***1」が表示されます。

jQuery

Posted by arkgame

関連記事: