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）在html：select

中将结束标记添加到<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);
        }  
    }

}

Answer 2

首先，我将你的选项变量移动到for循环中。虽然我不知道您的代码还有什么问题，但使用以下方法可以工作 - （这是用于测试的硬编码变量，将它们交换为从您的ajax检索到的拆分变量） -

var selectValues = ['test1'，'test2'，'test3'];

function handleStateChange(){
  var select = document.getElementsByTagName('select')[0];

  for(var i = 0; i < selectValues.length; i++){
    var option = document.createElement('option');
    option.text = selectValues[i];

    select.appendChild(option);

    console.log(selectValues[i]);
  }
}

小提琴 -

https://jsfiddle.net/8pqq82eq/

如何在ajax中添加下拉选项

2 个答案: