无法创建bootstrap multiselect下拉列表

Question

我正在尝试创建一个Bootstrap MultiSelect下拉列表。我在用 JQuery调用我的asmx服务并根据数据，我将它绑定到<select>控件。但我不知道我错过了哪里和什么。以下是我的工作。

1。数据访问代码

         /// <summary>
        /// Method used for creating and managing Expiration policy types
        /// </summary>
        /// <param name="rewards"></param>
        /// <param name="operationFlag"></param>
        /// <returns></returns>
        public object ManagePointBasedRewards(PointBasedRewards rewards, int operationFlag)
        {
            var result = new object();
            using (var connection = new SqlConnection(ConnectionString))
            {
                connection.Open();
                using (var command = new SqlCommand("spPointBasedRewards_ManagePointBasedRewards", connection))
                {
                    command.CommandType = CommandType.StoredProcedure;
                    command.Parameters.AddWithValue("@Id", rewards.Id);
                    command.Parameters.AddWithValue("@Name", rewards.Name);
                    command.Parameters.AddWithValue("@Points", rewards.Points);
                    command.Parameters.AddWithValue("@ShortDescription", rewards.ShortDescription);
                    command.Parameters.AddWithValue("@CreatedBy", rewards.ModifiedBy);
                    command.Parameters.AddWithValue("@Flag", operationFlag);

                    switch (operationFlag)
                    {
                        case 1:
                        case 2:
                        case 3:
                            var i = command.ExecuteNonQuery();
                            result = i > 0;
                            break;
                        case 4:
                        case 5:
                             using (var reader = command.ExecuteReader(CommandBehavior.CloseConnection))
                            {
                                var dt = new DataTable();
                                dt.Load(reader);
                                result = dt;
                                reader.Dispose();
                            }
                            break;
                        case 6:
                            using (var reader = command.ExecuteReader(CommandBehavior.CloseConnection))
                            {
                                var dt = new DataTable();
                                dt.Load(reader);
                               reader.Dispose();
                               result = (from DataRow row in dt.Rows select new GenericKeyValuePair {Text = row["text"].ToString(), Value = row["value"].ToString()}).ToList();
                            }
                            break;

                    }
                    connection.Dispose();

                }
                return JsonConvert.SerializeObject(result);
            }
        }

2。 web服务：

 [WebMethod]
 [ScriptMethod(UseHttpGet = true)]
 public object GetAllActivePointBasedRewards(int flag) {
   var rewards = new PointBasedRewards {
     Name = "name",
       Points = 0,
       ShortDescription = string.Empty,
       ModifiedBy = string.Empty,
       CreatedBy = string.Empty,
       IsActive = true
   };
   return new ControllerOffers().ManagePointBasedRewards(rewards, flag);
 }

第3。 JS

$(document).ready(function() {
  $.ajax({
    url: globalURL + "GetAllActivePointBasedRewards",
    data: {
      flag: 6
    },
    dataType: "jsonp",
    type: "POST",
    async: false,
    success: function(data) {
      $('#tokenize').html('');
      //iterate over the data and append a select option
      $.each(data.d, function(key, value) {
        $('#tokenize').append($("<option>").attr("value", value.Value).attr("text", value.Text));
      });
    },
    error: function() {
      //if there is an error append a 'none available' option
      $('#tokenize').html('<option id="-1">none available</option>');
    }
  });
});

4。 HTML

<div class="form-group" id="PointSystem" style="display: none;">
  <label style="text-align: left;" class="col-sm-3 control-label">
    Rewards :
    <button type="button" data-toggle="tooltip" data-placement="left" title="Attach one or more point based rewards with current offer." class="helper circlegrey"><i class="fa fa-question-circle"></i>
    </button>
  </label>
  <div class="col-sm-8">
    <select id="tokenize" multiple="multiple"></select>
  </div>
</div>

5。网络服务输出

<?xml version="1.0" encoding="UTF-8" ?>
<anyType xmlns="http://tempuri.org/" xmlns:d1p1="http://www.w3.org/2001/XMLSchema-instance" d1p1:type="q1:string" xmlns:q1="http://www.w3.org/2001/XMLSchema">[{"Text":"50 points gives you Burger with Coke","Value":"1"},{"Text":"50 points gives you zvzxv","Value":"2"},{"Text":"50 points gives you zczxc","Value":"3"},{"Text":"100 points gives you Chocobar","Value":"4"}]</anyType>

6。输出（屏幕截图）

Answer 1

$('#tokenize').append($("<option>").attr("value", value.Value).attr("text", value.Text));

在此代码文本中不是jquery属性，它的直接属性只是替换代码中的行

 $('#tokenize').append($("<option>").attr("value", value.Value).text(value.Text));

以下代码可以使用，您可以查看一次。

＆＃13;

＆＃13;

$(document).ready(function() {
  $.ajax({
    url: globalURL + "GetAllActivePointBasedRewards",
    data: {
      flag: 6
    },
    dataType: "jsonp",
    type: "POST",
    async: false,
    success: function(data) {
      $('#tokenize').html('');
      //iterate over the data and append a select option
      $.each(data.d, function(key, value) {
        $('#tokenize').append($("<option>").attr("value", value.Value).text(value.Text));
      });
    },
    error: function() {
      //if there is an error append a 'none available' option
      $('#tokenize').html('<option id="-1">none available</option>');
    }
  });
});

＆＃13;

＆＃13;

＆＃13;