jQuery动态产生select option下拉列表

但其中没有实现动态产生select option下拉列表。

在jQuery环境之下使用创建jQuery对象来实现动态产生，那是很方便的事情。

在数据库中准备一些数据：

存储过程：

开发ASP.NET MVC，实现程序，少不了model:

现创建一个实体Entity，即是与数据库通讯：

接下来，你可以创建获取数据集的方法，让前端jQuery执行的方法：

ok,一切准备就绪。

创建一个select对象：

$selectCity = $('<select />').attr({ name: 'city', class: 'selectcity' });

你可以创建一个空的option:

$("<option></option>", { value: "", text: "" }).appendTo($selectCity);

从数据库读出来的数据，现可以动态产生option:

如果你需要在显示时，绑定一个选择值，那怎样实现呢？很简单的，在$.each时，判断一下：

上面的“3”是一个变量，即是你需要绑定的值。下面是效果演示：

以上所述是小编给大家介绍的jQuery动态产生select option下拉列表，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • JS & JQuery 动态添加 select option

    今天有朋友问我一个关于在<select>里动态添加option问题,一开始以为是JS那里动态添加,所以用了JS动态添加option的方法,但你那里是用JQuery的,所以才会一直出错,下面记下在JS和JQuery里添加option的区别. JS: var selid = document.getElementById("sltid"); for(var i=0; i<10;i++){ //循环添加多个值 sid.option[i] = new Option(i,i);

  • 删除select中所有option选项jquery代码

    这样写 复制代码 代码如下: <select id="search"> <option>baidu</option> <option>sogou</option> </select> 清空: 复制代码 代码如下: $("#search").find("option").remove(); 或者 $("#search").empty();

  • jQuery获取select选中的option的value值实现方法

    如下所示: <select id="isshow" name="isshow" style="width: 100px"> <option value="1">显示</option> <option value="2">不显示</option> </select> var isshow = $("#isshow ")

  • JQuery中对Select的option项的添加、删除、取值

    jQuery获取Select选择的Text和Value: 复制代码 代码如下: $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text var checkValue=$("#select_id

  • 浅析jQuery对select操作小结(遍历option,操作option)

    //遍历option和添加.移除optionfunction changeShipMethod(shipping){ var len = $("select[@name=ISHIPTYPE] option").length if(shipping.value != "CA"){  $("select[@name=ISHIPTYPE] option").each(function(){   if($(this).val() == 111){   

  • jquery操作select option 的代码小结

    1.获取选中select的value和text,html代码如下: 复制代码 代码如下: <select id="mySelect"> <option value="1">one</option> <option value="2">two</option> <option value="3">three</option> </selec

  • JQuery动态添加Select的Option元素实现方法

    如下所示: var selector=$('<select></select>'); for(var i=0;i<5;i++){ selector.append('<option value="'+i+'">'+i+'</option>'); } 以上这篇JQuery动态添加Select的Option元素实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • JQuery操作Select的Options的Bug(IE8兼容性视图模式)

    JQuery操作Select的Options的Bug(IE8兼容性视图模式)

    Bug现场: 通过开发人员工具查看,下拉列表框是有Options的,但你点击选择的时候却什么也不显示. 重现步骤: 该问题发生在级联下拉框的情况,第一个列表改变,第二个列表的值跟着改变! 本例中使用以下方法绑定数据: 复制代码 代码如下: //绑定下拉框 //ctnSelector:下拉框ID,带#号, //jsonData:JSON数据, //txtField:文本字段名称, //valField:值字段名称, //strOptions:默认填加的项 function InitSelectOp

  • jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全

    个人做了一些自定义的修改 复制代码 代码如下: <!--[if lt IE 9]> <script type="text/javascript"> jQuery(function($){ var el; $("select").each(function() { el = $(this); el.data("origWidth", el.css("width")); // el.data("o

  • jQuery操作Select的Option上下移动及移除添加等等

    复制代码 代码如下: <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript"> /**

随机推荐