Maria h Maria h - 10 months ago 34
Javascript Question

Select option does not show data

This is my first attempt to databind an html control via ajax. I check/debug my ajax call and the data are retrieved OK, but the do not appear in the select option. My javascript is located at the bottom of my aspx page. What's the problem

$(function () {
type: "POST",
url: "psHlp.asmx/getDistricts",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {

$.each(msg.d, function () {

error: function () {
alert("Failed to load districts");

This is my select option which is located at the beginning of my page

<div class="col-sm-3 col-xs-12 ffield">
<select id="District" style="display: none;">



Finally I found the solution. All the above suggestions were correct. The problem occurred because I'm using bootstarp js/css (customer's designer provided the layout), so I need to rebuild the multiselect option after the append.

 var options = "";
    $.each(response.d, function () {

        options += '<option value="' + this['Value'] + '">' + this['Text'] + '</option>';


Hope this will help at least one person :)