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

Answer 1

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