Maria h Maria h - 2 years ago 73
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;">


Answer Source

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 :)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download