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构造函数，它接受文本和可选值，以及select元素的options数组类似的东西（它不是真的是一个阵列）：

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元素更可靠的跨浏览器。

您也可以通过设置length（与数组一样）来截断类似数组的事物，例如：清除所有选项：

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

Answer 2

文本属性

可以访问<option>内的文本

opt.text='MR';

另请注意：您设置名为opt的对象的属性，但对象是opt1（opt未定义，因此您运行错误并且脚本停止执行）

var opt1 = document.createElement（'option'）;
选择 .setAttribute（'value'，'mr'）;
的选择 .setAttribute（ '编号'， '少年'）;

Answer 3

如果您正在使用jQuery，您可以尝试这样做（与您所写的相同）：

var num = 0;
$('#gen_select').click(function(){
    var sel_opt=$('<select>').attr({
        'id' : 'status' + num,
        'name' : 'shi'
    }).appendTo('#select_opt_div');

    var opt1=$('<option>').attr({
        'value' : 'mr',
        'id' : 'boy'
    }).text('MR').appendTo(sel_opt);

    var opt2=$('<option>').attr({
        'value' : 'ms',
        'id' : 'girl'
    }).text('MS').appendTo(sel_opt);

    num++;
});

jsFiddle Demo

在DOM操作/遍历方面，jQuery是你最好的朋友。

Answer 4

尝试使用像这样的jquery将option附加到select标记

$('#SelectID').append('<option value="Mr">Boy</option>');

Answer 5

如果您使用的是jQuery，可以像这样设置值

opt2.val('ms');

或者你可以写纯粹的javascript

opt2.value = 'ms';
opt2.text = 'MS';

在元素的js值中，与属性不同。

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

5 个答案: