Question

I am getting my data from a web service using ajax call. i am saving it in a variable, the problem i am facing is that i need to display this data that i am getting into a select menu..
i am not able to crack it up.
my html code.

<div data-role="page" id="requestPage">
<div data-role="fieldcontain">
<select id="select-choice-3" name="pid you need">
<option value="select-value" selected="selected">-- Select PID --</option>
// here i want my data to be
</select>
</div>
</div>

JS code

function content_Load(){
var soapMessage='<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"><soap:Body><GetProjectByPeopleId xmlns="http://there.org/"><tmsUserId>' + TmsUserId +'</tmsUserId></GetProjectByPeopleId></soap:Body></soap:Envelope>'

$.ajax({
       url: "http://22.232.32.14/therewebservice/thereeatmswebservice.asmx?op=GetProjectByPeopleId",
       type: "POST",
       dataType: "xml",
       SOAPAction: "http://there.org/GetProjectByPeopleId",
       data: soapMessage,
       complete: endSaveProduct,
       contentType: "text/xml; charset=\"utf-8\""
       });
return false;
}
function endSaveProduct(xmlHttpRequest,status){

$(xmlHttpRequest.responseXML)
.find('Table')
.each(function()
      {
      var ProjectName =$(this).find('ProjectName').text();
// i am able to get ProjectName as my data, now i want it to get into the select menu for which i have written the code bellow but that's not working.
      var optionlist='';
      optionlist += '<option>' + ProjectName + '</option>';
      $("#select-choice-3").html(optionlist).selectmenu('refresh', true);
      window.location.href="#requestPage";

      });
}

Answer 1

It looks to me that in the endSaveProduct function, when you are iterating over each ‘Table’, you:

1. blank/clear the variable optionlist (optionlist = ”;),
2. add ProjectName to the variable optionlist (which is correct, but since you blank it each time, this has no effect)
3. overwrite the select with the ProjectName found,
4. navigate to the #requestPage.

If I’m correct, this is leaving you with only the last ‘ProjectName’ found after the loop has finished, effectively giving you a select with just one option. Try placing the optionlist variable, the actual populating of the option list and the redirection outside the each():

function endSaveProduct(xmlHttpRequest,status){
    var optionlist=''; //moved variable declaration here
    $(xmlHttpRequest.responseXML)
        .find('Table')
        .each(function()
        {
            optionlist += '<option>' + $(this).find('ProjectName').text() + '</option>'; //shortened it
        });
    //moved populating the optionlist here
    $("#select-choice-3").html(optionlist).selectmenu('refresh', true);
    window.location.href="#requestPage";
}

I haven’t tested this, but I think this is the problem.

Also, you are overwriting your default selected ‘–Select PID–‘ option. To fix that you can also rewrite the optionlist definition as:

var optionlist = '<option value="select-value" selected="selected">-- Select PID --</option>';

Or, as suggested by joerajeev, use .append() instead of html().