「jQuery」appendでセレクトボックスの要素をセットするサンプル

2022年2月21日

環境
jquery 3.6.0
書式
$(セレクタ名).append($('<option>’).html(label値).val(value値).attr('selected’, sel));
セレクトタグにappendメソッドで要素を追加しています。
使用例

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
  $('#btnSet').click(function(event){
  　//要素配列の定義
    var cityArr = [
     {value:"tokyo",label:"東京"}
    ,{value:"oosaka",label:"大阪"}
    ,{value:"yokohama",label:"横浜"}
    ,{value:"kawasaki",label:"川崎",sel:true}
    ];
 
    for(var idx=0; idx < cityArr.length; idx++){
      //labelの値
      var lab = cityArr[idx].label;
      //valueの値
      var val = cityArr[idx].value;
      //selected値
      var sel = cityArr[idx].sel;
       //セレクトボックスに要素を追加する
    $('#city').append($('<option>').html(lab).val(val).attr('selected', sel));
    }
  });
 
});
</script>
</head>
<body>
  <select id="city"></select>
  <p><input type="button" id="btnSet" value="要素追加"></p>
</body>
</html>

結果
「要素追加」ボタンを押すとセレクトボックスの要素を追加します。

jQuery

Posted by arkgame