从 HTML5 输入列表中获取所选项目的 ID

Question

如何从输入列表中获取所选项目的 ID。我可以获取该项目，但无法获取所选项目的 ID。

<div class="form-row">
<label>
<span>&nbsp;Selected Items</span>
<input list="username" runat="server" id="usernameInput" class="form-control input_list" placeholder="FACULTY" required="required" />
<datalist id="username" runat="server"></datalist>
</label>
</div>
<div class="form-row">
<label>
<span>&nbsp;&nbsp;Selected HTML5 Input</span>
<input type="text" id="input_selected" runat="server" />
</label>
</div>
<div class="form-row">
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
</div>

我想向用户显示输入列表中的USER_NAME，但想在代码隐藏页面中获取所选USER_NAME USER_ID。

public void GetUserName()
{
string strQuery = "SELECT USER_ID, USER_NAME FROM TBL_USER";
SqlCommand cmd = new SqlCommand(strQuery);
DBConnection conn_ = new DBConnection();
DataTable dt = conn_.SelectData(cmd);
var builder = new System.Text.StringBuilder();
for (int i = 0; i < dt.Rows.Count; i++)
{
builder.Append(String.Format("<option value='{0}'>", dt.Rows[i][1]));
}
username.InnerHtml = builder.ToString();
usernameInput.Attributes["list"] = username.ClientID;
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
input_selected.Value = usernameInput.Value;
}   

这给了我USER_NAME，但我想在代码隐藏页面中获取USER_ID。我该怎么做？

Answer 1

关于HTML表单中HTML5datalist元素的一些问题： 选择选项与数据列表选项：

如果我们专注于使用<datalist>作为文本的选项列表 字段，那么这里是它和 选择框：

• <datalist>馈送文本框具有用于显示标签和提交的单个字符串。选择框可以具有不同的提交值与 显示标签<option value='ie'>Internet Explorer</option>.

如上所述，datalist的显示标签文本和值具有相同的字符串，因此您不能在datalist中使用builder.Append(String.Format("<option value='{0}'>{1}</option>", ...)占位符，就像通常在select元素中使用的那样。

a) 如果您仍然想使用datalist和 fetch 用户 ID 而不是用户名，您可以将DataTable内容存储在Session中(或其他能够在运行时保存DataTable的实例，因此无需再次重新查询数据库)并在之后btnSubmit_Click事件期间执行DataTable.Select查询：

public void GetUserName()
{
// other stuff
DataTable dt = conn_.SelectData(cmd);
Session["Datatable"] = dt;
// other stuff
}
// Button click event handler
protected void btnSubmit_Click(object sender, EventArgs e)
{
var value = usernameInput.Value;
DataTable dt = (DataTable)Session["Datatable"];
string expression = "USER_NAME = '" + value + "'";
DataRow[] result = dt.Select(expression);
input_selected.Value = result[0][0].ToString(); // ensure the result is only a single user ID result
}

b) 如果您愿意将datalist更改为能够包含不同数据标签和表单提交值的纯select元素，请在以下之前使用上述option占位符：

for (int i = 0; i < dt.Rows.Count; i++)
{
// if the DataTable has 2 columns,
// 0 = USER_ID, 1 = USER_NAME
builder.Append(String.Format("<option value='{0}'>{1}</option>", dt.Rows[i][0].ToString(), dt.Rows[i][1].ToString()));
}
// Button event handler
protected void btnSubmit_Click(object sender, EventArgs e)
{
input_selected.Value = username.Value;
}
<%-- datalist changed to select element --%>
<select id="username" runat="server" ...></select>

然后，您可以删除input名为usernameInput的标记，datalist和 JS 一起使用客户端自动完成功能。