Question

我正在为Select Option设计动态HTML，如下所示：

item += "<td class='ddl' style='width:40%;'>";
item += "<select>"
item += " <option id='list' name='selector' value=" + select + ">" + select + "</option>";
for (var l = 0; l < array.length; l++) {
    item += " <option class='ddl' value=" + array[l] + ">" + array[l] + "</option>";
}
item += "</select>";
if ("One"!= '') {
    $('#list').val("One");                      
}
item += "</td>";

上面的代码创建了一个动态HTML，如下所示：

<select disabled="">
<option select="" value="Please" name="selector" id="list">Please Select</option>
<option value="One" class="ddl">One</option> 
<option value="Two" class="ddl">Two</option>
</select>

我想动态地将Select的值设置为＆＃34; One＆＃34; 。

注意：代码不在document.ready中，因为我无法将代码保留在ready（）中。我可能会在页面上转动之前将值分配给Select。请建议我。

Answer 1

在下拉列表（select）添加到页面后，您需要调用javaScript来选择值。例如，如果html是

<div id="myContainer" />

然后javascript应该像

var item = "";
//Insert your code to create item
item +="<select id='mySelect'>";
item +='<option select="" value="Please" name="selector" id="list">Please   Select</option>';
item +='<option value="One" class="ddl">One</option> ';
item +='<option value="Two" class="ddl">Two</option>';
item +='</select>';

$('#myContainer').append(item); //Add to html

//Now the id "mySelect" is available
$('#mySelect').val('One')

我已在http://jsfiddle.net/taleebanwar/n9vCb/

添加了一个jsFiddle来证明这一点

Answer 2

您还可以在动态创建选择时在相应的选项标签上设置所选属性。

Answer 3

如果您使用的是jQuery，那么为什么不利用该库来创建select，例如，使用类似的内容（Example）：

var numbers = ['one', 'two', 'three', 'four', 'five'];
var select = $('<select/>', {id:'list', name:'selector'});
$.each(numbers, function(key, value) {
    var text = value[0].toUpperCase() + value.substr(1);
    var option = $("<option/>", { class:'ddl', value: value, text: text });
    select.append(option);
});
select.val('two').appendTo('body');

我已将select添加到body中，但您可以将其附加到td中，然后您可以实现它，尝试一下，创建td方式并在select中插入td，然后在表格中插入td。您也可以查看this answer。

使用Jquery动态选择选项

3 个答案: