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

Question

I have some code for dynamically populating select options. It works when I use this in a plain text file locally. However this does not work in my wordpress based site. Here is the code :

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

I am aware the code is a bit messy. But it is dynamically created, so I could not help it much. The part at the last 4-5 lines ( ones with alert ) are to control if I am executing the function. And as it seems, I am executing the function. Alerts pop up, and also with the expected content in them. It also prooves for loop works fine.

Also, I have checked and validated that there are no js errors, in firebug.

I am really stuck, if this does not work, I will have to change a bunch of other codes. I will appreciate any help. Thank you.

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

I have just realized, i did not explain the problem -.-. The problem is i can get correct content in those controlled alert boxes. But the second select box's content will not change as expected. What I was trying to do is, to change the 2nd select box's option based on what is selected in the first select box. First one's id is "toplevel", second one has "selectlevel2"

I ALSO WANT TO ADD:

The template automatically adds the following lines under the select tags :

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

So If I dynamically add new elements it still overrides "Seçiniz" on them. ( Which I have decided in the php codes as the first defaul element, which means "Please Select". ). I think whatever those lines is it is about something called " Chosen ". How is it possible to add such a div tag under every select tags automatically?

Answer 1

SelectElement.options is a read-only variable. ( mdn ). What you are trying to do doesn't work. You'll need to use something like the following code:

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

On the first line, this uses 'var', as you previously leaked it in the global scope. In the loop it now uses document.createElement ( mdn ) and Element.appendChild ( mdn ).

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

Answer 2

I solved my problem. It seems that, they declared a css file name "chosen" for select tags. I think it is a public library. So somehow, I still can not understand how, it adds those div tags after every select element. Weird. I deleted the library from the template folders : D. Which let me use standard elements and then the code worked.

Edit : Further research showed me that there is a select box plugin named chosen.