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!

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!

• javascript
• jquery
• html

• 2 Hi @leyasu Sawada problem with your variable....opt is not defined... make opt as opt1 it will work – Shiva Srikanth Thummidi Commented Jun 26, 2011 at 8:35
• 1 and one more thing i suggest you is try to use jquery library efficiently so you can get less and beautiful lines of code for eg: use ...$("#status"+num) instead of using document.getElementById("status"+num). Thank you.. – Shiva Srikanth Thummidi Commented Jun 26, 2011 at 8:39

5 Answers 5

The preferred and maximally-patible 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), e.g. 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 patible. 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";

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 es to DOM manipulation/traversal.

try to append option to your select tag using jquery like this

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

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');

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.