從html5輸入列表中獲取所選項目的ID

如何從輸入列表中獲取所選項目的ID。我可以獲取物品，但無法獲取所選物品的ID。從html5輸入列表中獲取所選項目的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。我怎樣才能做到這一點？

來源

2017-09-14 user4221591

關於HTML5 datalist元素有些擔憂從HTML Form: Select-Option vs Datalist-Option：

如果我們專注於利用<datalist>作爲選項列表的文本場那麼這裏是和選擇框之間的一些具體的差異：

甲<datalist>饋文本框有兩個顯示標籤的單個字符串並提交。選擇框可以具有不同的提交值，而顯示標籤<option value='ie'>Internet Explorer</option>。

如上所述，對於datalist顯示標籤文本&值具有相同的字符串，這樣就不能在如一般在select元件中使用的datalistbuilder.Append(String.Format("<option value='{0}'>{1}</option>", ...)使用佔位符。

a）如果你仍然想使用datalist &獲取用戶ID而不是用戶名，您可存儲內部Session（或其他實例DataTable內容在運行時保持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>

然後，您可以刪除名爲通過datalist &使用客戶端自動完成與JS功能所需usernameInputinput標籤。

來源

2017-09-14 04:47:26

從html5輸入列表中獲取所選項目的ID

回答

相關問題