仿google下拉提示
編輯：AJAX詳解
1.建立一ASPx頁面，Html代碼
<Html>
<HEAD>
<title>WebForm1</title>
<SCRIPT language="Javascript">
//城市------------------------------
function cityResult()
{
var city=document.getElementById("TextBox1");
WebForm1.GetCityList(city.value,get_city_Result_CallBack);
}
function get_city_Result_CallBack(response)
{
if (response.value != null)
{
//debugger;
document.getElementById("DropDownList1").style.display="block";
document.getElementById("DropDownList1").length=0;
var ds = response.value;
if(ds != null && typeof(ds) == "object" && ds.Tables != null)
{
for(var i=0; i<ds.Tables[0].Rows.length; i++)
{
var name=ds.Tables[0].Rows[i].city;
var id=ds.Tables[0].Rows[i].cityID;
document.getElementById("DropDownList1").options.add(new Option(name,id));
}
}
}
else
{
document.getElementById("DropDownList1").style.display="none";
}
return
}
function getData()
{
var province=document.getElementById("DropDownList1");
var pindex = province.selectedIndex;
var pValue = province.options[pindex].value;
var pText = province.options[pindex].text;
document.getElementById("<%=TextBox1.ClIEntID%>").innerText=pText;
}
</SCRIPT>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<ASP:TextBox ID="TextBox1" runat="server"></ASP:TextBox>
<br>
<ASP:DropDownList ID="DropDownList1" runat="server" Width="192px" style="display:none"></ASP:DropDownList>
</form>
</body>
</Html>
<Html> <HEAD> <title>WebForm1</title> <SCRIPT language="Javascript"> //城市------------------------------ function cityResult() { var city=document.getElementById("TextBox1"); WebForm1.GetCityList(city.value,get_city_Result_CallBack); } function get_city_Result_CallBack(response) { if (response.value != null) { //debugger; document.getElementById("DropDownList1").style.display="block"; document.getElementById("DropDownList1").length=0; var ds = response.value; if(ds != null && typeof(ds) == "object" && ds.Tables != null) { for(var i=0; i<ds.Tables[0].Rows.length; i++) { var name=ds.Tables[0].Rows[i].city; var id=ds.Tables[0].Rows[i].cityID; document.getElementById("DropDownList1").options.add(new Option(name,id)); } } } else { document.getElementById("DropDownList1").style.display="none"; } return } function getData() { var province=document.getElementById("DropDownList1"); var pindex = province.selectedIndex; var pValue = province.options[pindex].value; var pText = province.options[pindex].text; document.getElementById("<%=TextBox1.ClIEntID%>").innerText=pText; } </SCRIPT> </HEAD> <body> <form id="Form1" method="post" runat="server"> <ASP:TextBox ID="TextBox1" runat="server"></ASP:TextBox> <br> <ASP:DropDownList ID="DropDownList1" runat="server" Width="192px" style="display:none"></ASP:DropDownList> </form> </body></Html>
相關文章
- 使用BootStrap實現用戶登錄界面UI
- BootStrap Typeahead自動補全插件實例代碼
- BootStrap中Datepicker控件帶中文的js文件
- 封裝的dialog插件 基於bootstrap模態對話框的簡單擴展
- AJAX +SpringMVC 實現bootstrap模態框的分頁查詢功能
- Ajax跨域訪問Cookie丟失問題的解決方法
- Ajax bootstrap美化網頁並實現頁面的加載刪除與查看詳情
- 基於bootstrap的上傳插件fileinput實現ajax異步上傳功能(支持多文件上傳預覽拖拽)
- 使用jquery datatable和bootsrap創建表格實例代碼
- 淺析bootstrap原理及優缺點
小編推薦
熱門推薦