动态填充选择标记不起作用

Question

我有一些动态填充select选项的代码。当我在本地的纯文本文件中使用它时，它可以工作。然而，这并不适用于我的基于wordpress的网站。以下是代码：

<div class="postcell">
  <select onchange="populate1(this)" id="toplevel">
    <option>SEÇİNİZ</option>
    <option value="Keçiören">Keçiören</option>
  </select>
</div>
<div class="postcell">
  <select  id="selectlevel2"></select>
</div>
<script type="text/javascript">
  function populate1(selectp)
  {
    selectc=document.getElementById('selectlevel2');
    if(!selectc){return;}   

    var content=new Array();
    content['Keçiören']=['BLABLA', 'araba'];
    selectc.options.length=0;
    cur=content[selectp.options[selectp.selectedIndex].value];
    if(!cur){return;}

    selectc.options.length=cur.length;
    for(var i=0;i<cur.length;i++)
    {
      selectc.options[i].text=cur[i];
      selectc.options[i].value=cur[i];
    }

    alert(selectc.options[0].text);
    alert(selectc.options[1].text);
  }

</script>

我知道代码有点乱七八糟。但是它是动态创建的，所以我无法控制它。最后4-5行的部分(有警告的部分)是控制我是否正在执行该函数。就像看起来，我在执行这个函数。弹出警报，其中还包含预期的内容。它还为循环工作提供了很好的支持。

另外，我检查并验证了在firebug中没有js错误。

我真的被困住了，如果这不起作用，我将不得不改变一堆其他代码。我会感谢你的帮助。谢谢。

------EDIT------

我刚刚意识到，我没有解释这个问题但是第二个复选框的内容不会像预期的那样改变。我想要做的是，根据第一个选择框中选择的内容更改第二个复选框的选项。第一个是"toplevel"，第二个是"selectlevel2“

我还要补充一句：

模板自动在select标记下添加以下行：

<div id="selectlevel2_chzn" class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 220px;" title="">
<a class="chzn-single" tabindex="-1" href="javascript:void(0)">
<span>Seçiniz</span>
<div>

因此，如果我动态地添加新元素，它仍然会覆盖它们上的“Se iniz”。(我在php代码中将其确定为第一个defaul元素，意思是“请选择”。)。我想不管这些台词是什么，都是关于所谓的“被选中”的。如何能够自动在每个select标记下添加这样的div标记？

Answer 1

SelectElement.options是一个只读变量.(mdn)。你想做的事行不通。您需要使用如下代码：

  function populate1(selectp)
  {
    var selectc=document.getElementById('selectlevel2');
    if(!selectc){return;}   

    var content=new Array();
    content['Keçiören']=['BLABLA', 'araba'];
    selectc.options.length=0;
    cur=content[selectp.options[selectp.selectedIndex].value];
    if(!cur){return;}

    //Clear all options
    selectc.innerHTML = "";

    selectc.options.length=cur.length;
    for(var i=0;i<cur.length;i++)
    {
      var tag = document.createElement('option');
      tag.innerText=cur[i];
      tag.value=cur[i];
      console.log( tag );
      selectc.appendChild( tag );
    }
  }

在第一行中，它使用'var'，就像您以前在全局范围中泄露的那样。在循环中，它现在使用document.createElement (mdn)和Element.appendChild (mdn)。

小提琴：http://jsfiddle.net/WYBX9/

Answer 2

我解决了我的问题。看起来，他们为select标记声明了一个css文件名“select”。我认为这是一个公共图书馆。所以，不知怎么的，我还是不明白，它是如何在每个select元素之后添加那些div标记的。真奇怪。我从模板文件夹中删除了库: D。它允许我使用标准元素，然后代码才能工作。

编辑:的进一步研究表明，有一个选择框插件名为select。