Question

我有一些用于动态填充选择选项的代码。当我在本地的纯文本文件中使用它时，它工作。但是这在我的基于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

我刚刚意识到，我没有解释这个问题 - .-。问题是我可以在那些受控制的警报框中获得正确的内容。但第二个选择框的内容不会按预期更改。我想要做的是，根据第一个选择框中选择的内容更改第二个选择框的选项。第一个的id是“toplevel”，第二个的id是“selectlevel2”

我也想添加：

模板会自动在选择标记下添加以下行：

<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代码中决定作为第一个默认元素，这意味着“请选择”。）。我认为无论这些线是什么，它都是关于“选择”的东西。如何自动在每个选择标签下添加这样的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元素之后添加了div标签。奇怪的。我从模板文件夹中删除了库：D。让我使用标准元素然后代码工作。

编辑：进一步的研究表明，我选择了一个名为select的盒子插件。

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

2 个答案: