how to change innerHTML of dynamically generated option form element

Question

I'm having a problem setting the innerHTML of an option form element. The select field and option field are generated properly but the problem is that there is no value for the option that is generated.

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

I also tried something like this, but no luck:

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

Please help, thanks in advance!

Answer 1

The preferred and maximally-compatible way to fill in select options is via the new Option constructor, which accepts the text and optional value, and the select element's options array-like-thing (it's not really an array):

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"

This is more reliable cross-browser than directly manipulating the DOM elements.

You can also truncate the array-like-thing by setting its length (as with an array), eg to clear all options out of it:

options.length = 0;

If you don't like the options[options.length] = ... syntax for adding options at the end, you can use options.add(...); instead. As far as I can tell it's just as cross-browser compatible. Note that that's add , not push ; this is one of the ways in which it's not an actual array. :-)

---

Update :

I notice you're putting id values on your options. That's fairly unusual, but you can do it. After you create your option via new Option , just assign an id to its id property:

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

Answer 2

The text inside an <option> may be accessed by the text-property

opt.text='MR';

Also note: you set the attributes of an object named opt , but the object is opt1 (opt is undefined, so you run in an error and the script stops executing)

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

Answer 3

If you are using jQuery anyways, you could try this (does the same what you wrote):

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

jQuery is your best friend when it comes to DOM manipulation/traversal.

Answer 4

尝试使用jquery将option附加到您的select标签

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

Answer 5

if you are using jQuery you can set the value like this

opt2.val('ms');

or you can write pure javascript

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

In js value of the element is different from attribute.