Question

通过从表中提取现有ID来填充文本框的jQuery代码似乎不起作用。当我在输入中键入一个值时，没有出现带有选项值的下拉列表。也许我在下拉列表中使用了错误的元素？

HTML：

  <label>ID* 
    <input id="firstName" type="text" name="firstName" />
  </label>

JQUERY：

   <script>
    $(document).ready(function () {
        $.ajax({
            url: 'pcfform.aspx/GetIds',
            type: 'post',
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            success: function (results) {
                for (var i = 0; i < results.d.length; i++) {
                    $("#firstName").append("<option label='" + results.d[i] +
                        "' value='" + results.d[i] + "'></option>");
                }
            },
            error: function (err) {
                alert(err.status + " - " + err.statusText);
            }
        });
    });
</script>

ASPX：

using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using PCF.Entities;
using PCF.Entities.Data;
 namespace PCF.Pages
 {
     public partial class pcfform : System.Web.UI.Page
     {
      [WebMethod]
      public static string[] GetIds() 
      {
          PCF.Entities.Data.Entities db = new   PCF.Entities.Data.Entities();
          var data = (from item in db.MasterTables 
                   where (!string.IsNullOrEmpty(item.FirstName))
                   select item.FirstName).Distinct();
        return data.ToArray(); 
    }
}
}

Answer 1

我明白了。我需要添加一个datalist。现在下拉列表显示选项

 <input id="firstName1" type="text" list="firstName" size="26" maxlength="20" name="firstName" tabindex="2" />
                                <datalist id="firstName" ></datalist>

Answer 2

虽然您已经找到了问题，但我发现代码中存在两个问题。首先，下拉列表应该是select控件而不是输入文本控件： -

<select id="lifeNumber" name="lifeNumber" />

其次，在您的成功回调中，您使用此来填充您的下拉列表： -

$("#firstName")

但是，你控件中的firstName是name属性而不是id，所以它应该是： -

$("#lifeNumber").append(..

jQuery代码，用表中的项填充<input />文本框

2 个答案: