javascript - 如何在ajax中添加下拉选项

Question

请帮忙，因为我无法向选择菜单添加选项。数据是 ~~ 类型的字符串形式。因此，我在这里分割数据，然后循环遍历数据的长度并根据选项进行设置。

下面是ajax代码

function showCircle() {

          alert("Microsoft");

         xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
      xmlhttp.onreadystatechange = handleStateChange;
      xmlhttp.open("POST", "GetCircleDetails" , true);

          xmlhttp.send();
        }

    function handleStateChange() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                alert("The server replied with: " );
                var splits21 = xmlhttp.responseText.split("~");
                var select = document.getElementById("circle");
                var opt = document.createElement("option"); 
                var i = 0;
                for (i = 0 ; i < xmlhttp.responseText.length ; i++)
                    {
                    opt.valueOf(splits21[i]);
                select.appendChild(opt);
            }


              alert("The server replied with: " +xmlHttp.responseText);
            }

下面是使用的 HTML 标签。

<select  name="slabFrom" onchange="showCircle(this.value)">
<option>--select--</option>
<option>slab1</option>
<option>slab2</option>
<option>slab3</option>
<option>slab4</option>

</select> 

</br>
</br>
The circle is:<select  id= 'circle' name="circle" >

Answer 1

您必须在 handleStateChange 中进行一些更正功能:

1) 更改您在 for 中迭代的内容至splits21而不是xmlhttp.responseText .

2) 移动var opt = document.createElement("option");进入for迭代

3) 更改 opt.valueOf(splits21[i]);至opt.value = splits21[i];

4) 添加结束标签到 select在html中:<select id='circle' name="circle"></select>

查看演示 - codepen .

function handleStateChange() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    var splits21 = xmlhttp.responseText.split("~");
    var select = document.getElementById("circle");
    var opt;

    for (i = 0; i < splits21.length; i++) {
        if (splits21[i]) {
          opt = document.createElement("option");
          opt.innerHTML = splits21[i];
          opt.value = splits21[i];
          select.appendChild(opt);
        }  
    }

}