jquery - jqueryで選択ボックスを作成するとエラーが発生しますか?

Question

<div id="item"></div>
var div = $('<div/>', {
   style : 'border-top: 1px dotted #ccc; margin: 4px; padding: 10px;'
}).appendTo($('#item'));
var select = $('<select/>',{
   name : 'name[]',
   option: {
      value : 1,
      value : 2
   }
}).appendTo(div);

=>エラーが選択ボックスの値を作成できません

この結果でそれを修正する方法：

<select name="name[]">
   <option value="1">1</option>
   <option value="2">2</option>
</select>

Answer 1

私があなただったら、次のようなことをします：

var div = $('<div/>')
    .css({
        borderTop : '1px dotted #ccc',
        margin : '4px',
        padding : '10px'
    });

div.appendTo( $('#item') );

var opts = {
    value_1 : 'value #1',
    value_2 : 'value #2',
    value_3 : 'value #3'
};
var select = $('<select/>').attr( 'name', 'name[]' );

$.each(opts, function( k, v ){
    // k is the key from opts, ex : value_1
    // v is the value attributet to k, ex : value #1
    $('<option />', {
        text : v,
        value : k
    }).appendTo( select );
});

select.appendTo( div );

プロジェクトに応じて、「opts」オブジェクトに ajax などからデータを入力できます。

例はこちら

また、その div には、css インラインを追加する代わりにクラスを追加します。時間内に変更する方が簡単です

Answer 2

代わりにこれを試してください。

$(document).ready(function(){
var div = $('<div></div>').css({'border-top': '1px dotted #ccc', 'margin': '4px', 'padding': '10px'});

var select = $('<select/>')
.attr('name','name[]')
.append('<option value=1>My option</option>')
.append('<option value=2>My option</option>')
.appendTo(div);

div.appendTo($('#item'));


});