您的位置：首页 > 其它

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

2017-10-30 16:22 351 查看

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

<%@ 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>

页面展示

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航