CODEWITHSUNDEEP
javascriptarraysajax
Sai Bharath
Sai Bharath

Reputation: 359

How to add the options of a drop down in ajax

Please help as am unable to add options to a select menu. The data is in a string form of the type ~~. So here I am splitting the data and then looping it through the length of the data and setting it against the options.

Below is the ajax code

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

Below is the HTML tags used.

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

Upvotes: 0

Views: 417

Answers (2)

Nikolay Ermakov
Nikolay Ermakov

Reputation: 5061

You have to make a couple of corrections in handleStateChange function:

1) change what you iterate in for to splits21instead of xmlhttp.responseText.

2) move var opt = document.createElement("option"); into the for iteration

3) change opt.valueOf(splits21[i]); to opt.value = splits21[i];

4) add closing tag to select in html: <select id='circle' name="circle"></select>

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

}

Upvotes: 1

Someone
Someone

Reputation: 3568

Firstly, I'd move your option variable in to the for loop. Whilst I don't know what else is going wrong with your code, using the following method works - (this is with hard coded variables for testing, swap them for the split variables retrieved from your 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 here -

https://jsfiddle.net/8pqq82eq/

Upvotes: 1

Related Questions