Как добавить параметры выпадающего списка в ajax

Question

Пожалуйста, помогите, поскольку я не могу добавить параметры в меню выбора. Данные находятся в строковой форме типа ~~. Поэтому здесь я разделяю данные, а затем перебираю их по длине данных и устанавливаю их для опций.

Ниже приведен код Аякса

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"); в изменение opt.valueOf(splits21[i]);for итерация

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

} 

Answer 2

Во-первых, я переместил бы вашу переменную option в цикл 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]); 
    } 
} 

Fiddle здесь -

https://jsfiddle.net/8pqq82eq/