「jQuery」appendでセレクトボックスの要素をセットするサンプル
環境
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>
結果
「要素追加」ボタンを押すとセレクトボックスの要素を追加します。