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 );

根据您的项目，您可以从 ajax 或您想要的任何内容填充“opts”对象

这里的例子

另外，对于那个 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'));


});