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

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.