无法使用 JS 创建\编辑选择元素

Question

我正在尝试使用 JS 创建一个选择元素，甚至编辑一个现有的元素，但我似乎遗漏了一些东西。 如果这很重要，这将在 Joomla 中完成。

这是我的代码：

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

这就是我尝试这样做的所有方法。 cat_chooser 是手动添加到页面的 SELECT。

有什么帮助吗？

编辑： 这是整个代码：

      <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 不是 Java。您不能使用int 或boolean 来声明变量。请改用var。
• JavaScript 不是 PHP。您不能使用 function createDDL(pid=null) 定义默认值
• .add 方法仅在HTMLSelectElement.options 对象中定义。
• .appendChild 应该在 document.body 上使用，不是 document，因为您想将元素添加到正文，而不是文档。

工作代码，前提是 <?php .. ?> 返回有效的 JavaScript 对象。

<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

您需要创建一个新元素并在每次迭代中附加它。目前，整个 for 循环将数据附加到同一个选项。

此外，在 for 循环语句中，您需要对 i 变量进行类型转换，而这在 JavaScript 中是无法做到的。