fail to create\edit select element with JS

Question

i am trying to create a select element with JS or even edit an existing one yet i seem to be missing something. this is done in Joomla if this matters.

this is my code:

 var option = document.createElement("option");
var select = document.createElement("select");
 select.setAttribute("id", "chooseCat");

for(int i=0;i<LevelNames.Length;i++)
    {
      option.innerHTML = LevelNames[i];
      option.setAttribute("value",LevelIds[i]);
      document.getElementById("cat_chooser").appendChild(option);
      document.getElementById("cat_chooser").options.add(option);
    }

select.onchange=function()
{
  CreateDDL(this.options[this.selectedIndex].value);

}

var test = document.getElementById("cat_chooser");
test.appendChild(select);
document.add(select);
document.appendChild(select);

this is all the ways i tried doing that. cat_chooser is a SELECT added manualy to the page.

any help?

EDIT: this is the whole code :

      <script language=\"javascript\" type=\"text/javascript\">


    //definitions
    var LevelNames = new Array();
    var LevelIds = new Array();
    boolean isFirstRun = true;


    //this functions create a Drop Down List 
    function CreateDDL(pid=null){

    //pass arrays for client side, henceforth : var id,var parent_it, var title
    <?php echo "\n".$id."\n".$parent_id."\n".$title."\n\n";?>
    if(pid){

    }
     if(isFirstRun)
        {
    for(int i=0; i < id.length;i++)
            {
    //if category has no parent
       if(parent_id[i] == "1")


            {
                LevelIds.push(id[i]);
                LevelNames.push(title[i]);

                }    
            }
        }
    else{
    for(int i=0; i < id.length;i++)
            {

    //if is a son of our target?
       if(parent_id[i] == pid)
            {
            LevelIds.push(id[i]);
            LevelNames.push(title[i]);

            }    
        }

}
//finished first run
isFirstRun=false;

//create the actuall drop down
//var option = document.createElement("option");
var select = document.createElement("select");
 select.setAttribute("id", "chooseCat");
for(var i=0;i<LevelNames.length;i++)
    {
       var option = new Option(/* Label */ LevelNames[i],
                              /* Value */ LevelIds[i]   );
      select.options.add(option);
    }

    select.onchange=function()
    {
      CreateDDL(this.options[this.selectedIndex].value);

    }
    var test = document.getElementById("cat_chooser");
    test.appendChild(select);
    //document.add(select);
    //document.appendChild(select);
    document.body.appendChild(select);

}
CreateDDL();
</script>

Answer 1

• JavaScript is not Java. You cannot use int or boolean to declare variables. Instead, use var.
• JavaScript is not PHP. You cannot define a default value using function createDDL(pid=null)
• The .add method is only defined at the HTMLSelectElement.options object.
• .appendChild should be used on document.body, not document, because you want to add elemetns to the body, rather than the document.

Working code, provided that <?php .. ?> returns valid JavaScript objects.

<script language="javascript" type="text/javascript"> //No backslashes..
//definitions
var LevelNames = new Array();
var LevelIds = new Array();
var isFirstRun = true;

//this functions create a Drop Down List 
function CreateDDL(pid) {
    if(typeof pid == "undefined") pid = null; //Default value
    //pass arrays for client side, henceforth : var id,var parent_it, var title
    <?php echo "\n".$id."\n".$parent_id."\n".$title."\n\n"; ?>
    if (pid) {

    }
    if (isFirstRun) {
        for (var i = 0; i < id.length; i++) {
            //if category has no parent
            if (parent_id[i] == "1")

            {
                LevelIds.push(id[i]);
                LevelNames.push(title[i]);

            }
        }
    } else {
        for (var i = 0; i < id.length; i++) {

            //if is a son of our target?
            if (parent_id[i] == pid) {
                LevelIds.push(id[i]);
                LevelNames.push(title[i]);

            }
        }

    }
    //finished first run
    isFirstRun = false;

    //create the actuall drop down
    //var option = document.createElement("option");
    var select = document.createElement("select");
    select.setAttribute("id", "chooseCat");
    for (var i = 0; i < LevelNames.length; i++) {
        var option = new Option(/* Label */ LevelNames[i],
                                /* Value */ LevelIds[i]);
        select.options.add(option);
    }

    select.onchange = function () {
        CreateDDL(this.options[this.selectedIndex].value);

    }
    var test = document.getElementById("cat_chooser");
    test.appendChild(select);
    //document.add(select);
    //document.appendChild(select);
    document.body.appendChild(select);

}
CreateDDL();
</script>

Answer 2

You need to create a new element and append it in each iteration. Currently, the entire for loop append data to the same option.

Also, in the for loop statement, you typecast the i variable, which you can't do in JavaScript.