实现输入框【输入填写+动态提示信息+下拉选择】

实现输入框能填写能下拉选择，填写时动态提示

 

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Default2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

        if (IsPostBack)
        { 
        
        }

        using (UsersDataContext con = new UsersDataContext())
        {
            string s = "" ;
            int count = 0;
            List<Users> ulist = con.Users.ToList();

            for (int i = 0; i < ulist.Count; i++)
            {
                if (count > 0)
                    s += ",";
                s += ulist[i].Nickname;
                count++;
            }


            HiddenField1.Value = s; //将需要的信息放到隐藏控件中
        }




    }
}
后台数据

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="jquepy/jquery-1.7.1.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            用户名：
        <asp:TextBox ID="TextBox1" runat="server" list="li" autocomplete="off"></asp:TextBox>
            <datalist id="li">
                <option value="123"></option>
                <option value="123"></option>
                <option value="123"></option>
                <option value="123"></option>
            </datalist>
    
            <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

            <asp:HiddenField ID="HiddenField1" runat="server" />


        </div>
    </form>
</body>
</html>

<script type ="text/javascript">

  
   var b = $("#HiddenField1").val();//取隐藏的值
    
   var strs = new Array();//定义数组
   strs = b.split(",");  //将字符分割
   var v = "";
   for (var i = 0; i < strs.length;i++)
   {
       v += "<option value=\"" + strs[i] + "\"> </option>";
   }

   $("#li").html(v);

    //取值 从 TextBox 中取
   $("#TextBox1").change(function () {

       var av = $("#TextBox1").val();
       $("#Label1").html(av);

   });


</script>
页面展示

 

posted @ 2017-10-30 16:22  唐宏昌  阅读(813)  评论(0)  编辑  收藏  举报