I need to display the text "Select the one" in the combo box by default

Question

I'm creating a combo box which loads options from JSON..Its loading the menus as expected.But I need to display the text "Select the one" in the combo box by default. I tried but can't find the solution..Can you advice me,How can i achieve it?

window.onload = function() {
    var obj = JSON.parse(str);    

    for (var i=0; i < obj.MenuParentTabs.length; i++)    {
        var option = document.createElement("option");    
        option.innerHTML = obj.MenuParentTabs[i].parentTabName;
        document.form1.fruits.appendChild(option);
    }
}

It might help to also show us your relevant HTML, or construct a simple example on jsfiddle. — jbabey, Jan 29 '13 at 13:39
[Really](http://stackoverflow.com/questions/6329580/how-to-set-the-default-value-of-a-select-box-using-jquery-in-ie9)?? [You](http://stackoverflow.com/questions/3518002/how-to-set-default-value-for-html-select-element) [searched](http://stackoverflow.com/questions/5212939/set-default-text-in-a-select-drop-down-box-menu) for a solution? — PenguinCoder, Jan 29 '13 at 13:43

Erick Petrucelli · Accepted Answer · 2013-01-29T14:12:01.177

4

You need to create the option with the text you want, before the for loop:

var option = document.createElement("option");
option.innerHTML = "Select the one";
document.form1.fruits.appendChild(option);

If the option isn't the first child of the select (i.e. you don't put it before the for loop for some reason), also set the selected attribute as well:

option.setAttribute("selected", "selected");

Complete code to help the OP:

window.onload = function() {
    var obj = JSON.parse(str);    

    var option = document.createElement("option");
    option.innerHTML = "Select the one";
    option.setAttribute("selected", "selected");
    document.form1.fruits.appendChild(option);

    for (var i = 0; i < obj.MenuParentTabs.length; i++) {
        option = document.createElement("option");
        option.innerHTML = obj.MenuParentTabs[i].parentTabName;
        document.form1.fruits.appendChild(option);
    }
}

edited Jan 29 '13 at 14:12

answered Jan 29 '13 at 13:40

Erick Petrucelli

14,386
8
64
84

You should also add selected to this option and maybe a "disabled" to it as well? Or use Javascript to remove it when the menu is shown. – Asitaka Jan 29 '13 at 13:43
@Asitaka, if it's the first option, it's already selected by default... And about the `disabled` suggestion, of course the OP can do it. Since it wasn't said in the question, I'll left it open in the answer. – Erick Petrucelli Jan 29 '13 at 13:47
This is true, but the OP might add options or do something that changes the order, specifying "selected" forces it to be selected no matter the order. – Asitaka Jan 29 '13 at 13:50
1

Ok, I explained a little better in case they don't put the code before the `for` loop. – Erick Petrucelli Jan 29 '13 at 13:54
@ErickPetru : I did as you mentioned above,But I am getting only the last item from the loop in the combo box. – Naju Jan 29 '13 at 14:05
@rightPath, I updated my answer with the complete code. Maybe it helps you. – Erick Petrucelli Jan 29 '13 at 14:12

score 1 · Answer 2 · answered Jan 29 '13 at 13:44

1

Try putting something like this before your for loop:

var option = document.createElement("option");    
option.innerHTML = "Select One";
document.form1.fruits.appendChild(option);

I can also highly recommend jQuery for these kind of shenanigans.

answered Jan 29 '13 at 13:44

Hurricane Hamilton

574
3
15

@hhamitlton : I did as you mentioned above,But I am getting only the last item from the loop in the combo box. – Naju Jan 29 '13 at 14:09

score 1 · Answer 3 · edited May 23 '17 at 12:27

There is a very similar question and answer over here:

HTML select: how to set default text which won't be shown in drop-down list?

basically do this:
var option = document.createElement("option");
option.innerHTML = "Select the one";
option.setAttribute("selected", "selected");
option.setAttribute("disabled", "disabled");
document.form1.fruits.appendChild(option);

and I suppose if you really wanted to be thorough, you could add something that hides this option when the menu appears.

I need to display the text "Select the one" in the combo box by default

3 Answers3