javascript - 如何更改动态生成的选项表单元素的innerHTML

Question

我在设置选项表单元素的innerHTML 时遇到问题。选择字段和选项字段已正确生成，但问题是生成的选项没有值。

<script src="jq.js"></script>


<script>
$(function(){
    var num = 0;
    $('#gen_select').click(function(){
        var sel_opt = document.createElement('select');
        sel_opt.setAttribute('id','status' + num);
        sel_opt.setAttribute('name', 'shi');



        document.getElementById('select_opt_div').appendChild(sel_opt);

        var opt1 = document.createElement('option');
        opt.setAttribute('value', 'mr');
        opt.setAttribute('id','boy');

        var opt2 = document.createElement('option');
        opt2.setAttribute('value', 'ms');
        opt2.setAttribute('id','girl');

        document.getElementById('status' + num).appendChild(opt1);
        document.getElementById('status' + num).appendChild(opt2);
        document.getElementById('boy').innerHTML = 'MR';
        document.getElementById('girl').innerHTML = 'MS';
        num++;
    });
});
</script>

<input type="button" id="gen_select" value="generate select"/>
<div id="select_opt_div"></div>

我也尝试过类似的方法，但没有运气:

opt2.innerHTML = 'MS';
opt.innerHTML = 'MR';

请帮忙，先谢谢了!

Answer 1

填充选择选项的首选且最大程度兼容的方式是通过 new Option 构造函数，该构造函数接受文本和可选值以及选择元素的 options 数组-like-thing(它不是真正的数组):

var options = document.getElementById('select_opt_div');
options[options.length] = new Option('MR', 'boy');   // Add option with text "MR" and value "boy"
options[options.length] = new Option('MS', 'girl');  // Add option with text "MS" and value "girl"

这比直接操作 DOM 元素更可靠的跨浏览器。

您还可以通过设置其长度(与数组一样)来 chop 类似数组的内容，例如清除其中的所有选项:

options.length = 0;

如果您不喜欢在末尾添加选项的 options[options.length] = ... 语法，您可以使用 options.add(...); 相反。据我所知，它是跨浏览器兼容的。请注意，这是add，而不是push；这是它不是实际数组的方式之一。 :-)

<小时/>

更新:

我注意到您在选项中添加了 id 值。这相当不寻常，但你可以做到。通过 new Option 创建选项后，只需为其 id 属性分配一个 id 即可:

option = new Option("text of option", "value of option");
option.id = "unique_ID_of_option";