动态填充select标记无效

Dynamically populating select tag does not work

本文关键字：无效 select 填充 动态      更新时间：2023-09-26

我有一些用于动态填充选择选项的代码。当我在本地纯文本文件中使用它时，它就起作用了。然而，这在我的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错误。

我真的被卡住了，如果这不起作用，我将不得不更改一堆其他代码。我将感谢任何帮助。非常感谢。

------编辑------

我刚刚意识到，我没有解释这个问题。问题是我可以在那些受控制的警报框中获得正确的内容。但第二个选择框的内容不会如预期的那样改变。我想做的是，根据第一个选择框中选择的内容更改第二个选择框的选项。第一个的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çinize"。（我在php代码中决定将其作为第一个defaul元素，意思是"Please Select"。）。我认为无论这些台词是什么，都是关于一种叫做"被选中"的东西。如何在每个select标记下自动添加这样的div标记？

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。

Fiddle：http://jsfiddle.net/WYBX9/

我解决了我的问题。看起来，他们为select标记声明了一个css文件名"selected"。我想这是一个公共图书馆。所以不知怎么的，我仍然不明白它是如何在每个select元素之后添加这些div标记的。奇怪的我从模板文件夹中删除了库：D.这让我可以使用标准元素，然后代码就工作了。

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

相关文章：