在下拉列表中自动完成工作并使其填充另一个下拉列表的内容

时间:2014-02-12 22:44:03

标签: javascript jquery html asp.net ajax

由于回发问题,我试图摆脱服务器端控件。我想要从数据库中填充两个选择框。当页面加载时,我将有一个组合框已经从数据库预先填充:

<select ID="cboCustomers">
   <option value="0">--Select a Sold-to customer--</option>
   <option value="1">Customer1</option>
   <option value="2">Customer2</option>
   <option value="3">Customer3</option>
   <option value="4">Customer4</option>
</select>

<select ID="cboShipTo">
   <option value="0">--Select a Ship-to customer--</option>
</select>

第一个下拉列表应该启用自动完成功能,当选择一个值时,它应该使用AJAX来填充第二个下拉列表,其中包含可供所选售达客户使用的送达客户。我有一个对象,它将获取参数并返回适当的数据。我的问题是如何完成上述工作。你能给我提供一些示例代码或jsFiddle来做我要求的吗?在此先感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

我有同样的问题,但寻找互联网找到了一些资源。

首先制作ajax句子:

<强> Jquery的

$('#cboCustomers').onchange(function(){
 var $valueTofound = $(this).val();
 $.ajax({
 type: "POST",
 url: "Your URL",
 data: Json.stringify({valueTofound : $valueTofound }), //You will pass data to code behind
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: function (data) {
 $.each(jQuery.parseJSON(data.d), function () {
        $("#ddlRecords").append($("<option>  </option>").val(this['ID']).html(this['Name'])); //fill the dropdown
 });
 },
 error: function (msg) {
 //error
 }
 });
});
});

代码隐藏C#

[WebMethod]
     public static string GetResultset(string valueTofound)
     {
       DataTable dataTable = new System.Data.DataTable(); //create a DataTable
       using (SqlConnection sqlConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["MyConnectionString"].ConnectionString))
     {
      try
      {
       SqlDataAdapter sqlDataAdapter = new SqlDataAdapter("DO your Select", sqlConnection);
       sqlDataAdapter.Fill(dataTable);  //Fill the Datatable
       return JsonConvert.SerializeObject(dataTable); //return to Jquery
      }
      catch (Exception ex)
      {
       throw ex;
      }
   }
}

那将有助于您或您有其他页面:

How to fill Dropdown from c# Other page