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 Form: Select-Option vs Datalist-Option的HTML5 datalist元素的一些问题：

如果我们专注于使用<datalist>作为文本选项列表   那么这里是一个与a之间的一些具体差异   选择框：


<datalist> Feed文本框只有一个字符串，用于显示标签和提交。选择框可以有不同的提交值与   显示标签<option value='ie'>Internet Explorer</option>。

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

a）如果您仍想使用datalist＆amp;获取用户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元素＆amp;表单提交值，使用前面提到的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＆amp;所需的usernameInput datalist标记newSong.title = Token;。使用JS的客户端自动完成功能。

从html5输入列表中获取所选项的id

1 个答案: