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

2013年7月19日2022年2月21日

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

<!DOCTYPE html>

<html>

<head>

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

</body>

</html>

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

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

関連投稿: