0

我有一些用于动态填充选择选项的代码。当我在本地的纯文本文件中使用它时，它可以工作。但是，这在我的基于 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 行的部分（带有 alert 的部分）用于控制我是否正在执行该功能。看起来，我正在执行该功能。弹出警报，其中还包含预期的内容。它还证明 for 循环可以正常工作。

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

我真的被卡住了，如果这不起作用，我将不得不更改一堆其他代码。我将不胜感激。谢谢你。

- - - 编辑 - - -

我刚刚意识到，我没有解释问题-.-。问题是我可以在那些受控的警报框中获得正确的内容。但是第二个选择框的内容不会像预期的那样改变。我想做的是，根据在第一个选择框中选择的内容来更改第二个选择框的选项。第一个的 id 是“toplevel”，第二个是“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 标签？

4

2 回答 2

0

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/

于 2013-08-17T10:37:34.730 回答
0

我解决了我的问题。看来，他们为选择标签声明了一个“选择”的 css 文件名。我认为这是一个公共图书馆。所以不知何故，我仍然无法理解它是如何在每个选择元素之后添加这些 div 标签的。诡异的。我从模板文件夹中删除了库：D。这让我可以使用标准元素，然后代码就可以工作了。

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

于 2013-08-17T10:50:04.653 回答