---恢复内容开始---

方法一

js-ajax部分

   function GetDListOfCt() {
$.ajax({
url: "../../Ajax/Boss_Show.ashx?type=GetCtName",
data: {},
type: "post",
dataType: "json",
success: function (data) {
var ddl = $("#ddlCaption");
for (var i = 0; i < data.length; i++) {
var text = data[i].RealName;
var value = data[i].id ;
document.getElementById('ddlCaption').add(new Option(text, value));//绑定DropDownList的value值,text值
} },
});
}

方法二

js部分

Js代码 1  <script type="text/javascript">
$(function () {
$("#btnGet").click(function () {
$.ajax({
url: "GetDatas.ashx",
type: "Post",
contentType: "application/json",
dataType: "json",
success: function (data) {
var ddl = $("#ddlDatas"); //删除节点
RemoveOption(); //方法1:添加默认节点
ddl.append("<option value='-1'>--请选择--</option>"); //方法2:添加默认节点
//ddl[0].options.add(new Option("--请选择--", "-1")); //转成Json对象
var result = eval(data); //循环遍历 下拉框绑定
$(result).each(function (key) {
//第一种方法
var opt = $("<option></option>").text(result[key].ProName).val(result[key].ProID);
ddl.append(opt); //第二种方法
// var proid = result[key].ProID;
// var proname = result[key].ProName;
//调用自定义方法
//AppendOption(proid, proname);
}); //第三种方法
//$.each(result, function (key, value) {
//alert("dd");
//var op = new Option(value.ProName, value.ProID);
// ddl[0].options.add(op);
// });
},
error: function (data) {
alert("Error");
}
});
}); }); function RemoveOption() {
$("#ddlDatas option").remove();
} function AppendOption(value, text) {
$("#ddlDatas").append("<option value='" + value + "'>"+ text + "</option>");
}
</script>

html部分

Html1 <body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="ddlDatas" name="prov" runat="server" style="width:200px;">
</asp:DropDownList>
<input type="button" id="btnGet" value="获取数据" />
</div>
</form>
</body>

ajax部分

         using Newtonsoft.Json; 

       DataTable dt = ds.Tables[];
string dtg = JsonConvert.SerializeObject(dt);
context.Response.Write(dtg);
context.Response.End();

(此内容仅自己收藏查阅。若侵犯布者利益 ,请与我联系删除)

内容选自  http://www.cnblogs.com/holyknight-zld/archive/2012/10/23/Json_Bind_DropDownList.html

---恢复内容结束---

js绑定下拉框的更多相关文章

  1. js绑定下拉框数据源

    ··· buildRule:function (ruleId) { var ruleList = internal.ruleList; if(ruleList){ var programme_sel= ...

  2. JS模拟下拉框select

    最近做的一个项目有下拉框 同事都是用的是美化控件,但是用美化控件当然是好 但是网上找的一个控件不知道扩展性怎么样?对以后的维护会不会造成有影响?比如我想增加一个功能或者减少一个功能会不会影响?还有就是 ...

  3. Js获取下拉框选定项的值和文本

    Js获取下拉框的值和文本网上提供了2种方法:但有些人很不负责任,他们根本没考虑到浏览器之间的差异导致的错误,导致很多新手琢磨了半天找不出错误! 下面我总结下Firefox和IE下获取下拉框选定项的值和 ...

  4. WPF AutoGeneratingColumn 绑定下拉框

    WPF自动产生列,前台代码: <DataGrid x:Name="Dg" AutoGenerateColumns="True" CanUserAddRow ...

  5. js改变下拉框内容

      js改变下拉框内容 CreateTime--2018年4月8日18:47:38 Author:Marydon 适用场景:通常情况下,级联菜单.通过ajax异步获取后台数据改写下拉框内容会有这种需求 ...

  6. 奥展项目笔记07--vue绑定下拉框和checkbox总结

    1.vue绑定下拉框 <div class="col-md-1 data"> <select class="form-control " v- ...

  7. JS 实现下拉框去重

    JS 实现下拉框去重 学习内容: 需求 总结: 学习内容: 需求 用 JS 下拉框去重 实现代码 <html> <head> <meta http-equiv=" ...

  8. JS 实现下拉框回显

    JS 实现下拉框回显 学习内容: 需求 总结: 学习内容: 需求 用 JS 实现下拉框回显 实现代码 <!DOCTYPE html> <html lang="en" ...

  9. jquery easyui无法绑定下拉框内容

    最近在研究jquery easyui的DataGrid,发现DataGrid中的下拉框无法绑定值,找了很久也没发现是具体问题所在,最后还是同事帮忙搞定的.具体问题竟然是jquery easyui提供的 ...

随机推荐

  1. How to setup Visual Studio without pain

    Visual Studio (VS) can be very hard to install. If you are lucky, one whole day may be enough to ins ...

  2. const_cast的用法与测试

    在C++里,把常量指针(即指向长脸的指针)赋值给非常量指针时,会提示错误,这时候就需要用到const_cast,看下面的两个转换情形: int j = 0; const int i = j; int ...

  3. #218 Iterate with JavaScript For Loops

    一个条件语句只能执行一次代码,而一个循环语句可以多次执行代码. JavaScript 中最常见的循环就是“for循环”. for循环中的三个表达式用分号隔开: for ([初始化]; [条件判断]; ...

  4. macOS终端开启TAB键自动补全功能(不区分大小写)

    1.在当前用户根目录(~)下,修改~/.inputrc这个文件(如果文件不存在,则新建该文件),文件内容如下: set show-all-if-ambiguous on set completion- ...

  5. 前端 高级 (二十五)vue2.0项目实战一 配置简要说明、代码简要说明、Import/Export、轮播和列表例子

    一.启动服务自动打开浏览器运行 二.配置简要说明 1.node_modules 安装好的依赖文件,中间件等,所在位置 2.package.jason 配置当前项目要安装的中间件和依赖文件 { &quo ...

  6. JAVA主流框架---SSM整合

      1.通过监听器的形式引入spring 2.SpringMVC容器和Spring容器间的关系 3.汇通的主旨 让大家熟练掌握SSM调用过程.并且将后台调用彻底掌握. 4.传统项目的搭建的弊端 1.传 ...

  7. html快速编写

    1. 嵌套操作---------- 子操作: > div>ul>li <div> <ul> <li></li> </ul> ...

  8. radio点击一下选中,再点击恢复未选状态

    radio点击一下选中,再点击恢复未选状态 实现方式1: <input   type="radio"   id="cat"   name="ca ...

  9. 如何用kaldi做孤立词识别三

    这次wer由15%下降到0%了,后面跑更多的模型 LOG (apply-cmvn[5.2.124~1396-70748]:main():apply-cmvn.cc:162) Applied cepst ...

  10. 公司项目接触到了FormData,总结一下

    Javascript FormData() 对象! 1.创建 var formData = new FormData(); 2.如果有form对象 则先获取form表单 然后初始化时直接加入进去 eg ...