分享个小实例,废话少说,直接上代码.....
贴上JS代码:
Js代码1<scripttype="text/javascript">
2$(function(){
3$("#btnGet").click(function(){
4$.ajax({
5url:"GetDatas.ashx",
6type:"Post",
7contentType:"application/json",
8dataType:"json",
9success:function(data){
10varddl=$("#ddlDatas");
11
12//删除节点
13RemoveOption();
14
15//方法1:添加默认节点
16ddl.append("<optionvalue='-1'>--请选择--</option>");
17
18//方法2:添加默认节点
19//ddl[0].options.add(newOption("--请选择--","-1"));
20
21//转成Json对象
22varresult=eval(data);
23
24//循环遍历下拉框绑定
25$(result).each(function(key){
26//第一种方法
27varopt=$("<option></option>").text(result[key].ProName).val(result[key].ProID);
28ddl.append(opt);
29
30//第二种方法
31//varproid=result[key].ProID;
32//varproname=result[key].ProName;
33//调用自定义方法
34//AppendOption(proid,proname);
35});
36
37//第三种方法
38//$.each(result,function(key,value){
39//alert("dd");
40//varop=newOption(value.ProName,value.ProID);
41//ddl[0].options.add(op);
42//});
43},
44error:function(data){
45alert("Error");
46}
47});
48});
49
50
51});
52
53functionRemoveOption(){
54$("#ddlDatasoption").remove();
55}
56
57functionAppendOption(value,text){
58$("#ddlDatas").append("<optionvalue='"+value+"'>"+text+"</option>");
59}
60</script>
贴上Html代码:
Html1<body>
2<formid="form1"runat="server">
3<div>
4<asp:DropDownListID="ddlDatas"name="prov"runat="server"style="width:200px;">
5</asp:DropDownList>
6<inputtype="button"id="btnGet"value="获取数据"/>
7</div>
8</form>
9</body>
贴上后台ashx页面获取数据代码:
获取数据1publicclassGetDatas:IHttpHandler
2{
3//【测试用】简单取得数据
4publicvoidProcessRequest(HttpContextcontext)
5{
6stringsqlConn=@"DataSource=Admin-PC;InitialCatalog=HolyKnight;PersistSecurityInfo=True;UserID=ni;Password=******";
7stringsql="select*fromProvice";
8using(SqlConnectionconn=newSqlConnection())
9{
10DataSetds=BAF.DataBase.SqlHelper.ExecuteDataset(sqlConn,CommandType.Text,sql);
11DataTabledt=ds.Tables[0];
12//转成Json格式数据
13stringproStr=JsonConvert.SerializeObject(dt);
14context.Response.ContentType="text/plain";
15context.Response.Write(proStr);
16
17}
18}
效果:
获取选中的值:
取值1//取值
2$("#ddlDatas").change(function(){
3//取得选中的文本值
4varselectText=$(this).find("option:selected").text();
5alert(selectText);
6//获取选中的value值
7varselectVlaue=$(this).find("option:selected").val();
8alert(selectVlaue);
9});