jQuery动态生成下拉框 本文转载自 查看原文 2016-06-04 22:37 24713 javascript 前一阵在项目里需要动态生成下拉框，找了一下用jQuery实现比较方便，这里整理一下。 下文所述方法只是本人在项目中遇到问题的解决方法，场景较为简单，也希望能帮助有需要的朋友 1、动态生成下拉框的两种方式 （1）将数据放在model中，JSP页面用EL表达式${}取出，该方式缺点是数据更改时必须刷新整个页面，本文不过多描述。 （2）就是本文要说的jQuery动态生成了，该方式适合数据频繁变动的场景。 2、<select>组成 <select> <option value=”aaa”>bbb</option> </select> 以上是一般的<select>格式，可以看到其中每个选项(<option>)需要的属性有value（选择该选项的值）和test（改选项的文本）， 所以我一般向前台发送个HashMap的对象，从对象中取出key和value刚好可以用于<select>的value和test 3、jQuery生成下拉框 通过Ajax请求得到下拉框所需数据并生成下拉框，直接上代码 $.ajax({ type:"GET", url:"请求地址", success:function(data){ for(var i in data){ $(“selector”).append(“<option value=i>“data[i]</option> } } }); 其中for(var i in data)可以很方便的遍历对象的属性的所有属性 4、选择<select> 好了既然已经生成下拉框了，那怎么获取下拉框中所选择的数据呢？ 可以用jQuery选择到<select>中的<option>并获取其value就可以了 $(“option:selected”).val(); 5、最后 本人小白一枚，进入软件行业只有一年时间，促使我开博客的缘起是因为看到了牛人刘未鹏的一篇文章《为什么你从现在开始写博客》，相关经验该文中已介绍的很详细了，朋友们觉得不够过瘾还可以买他写的《暗时间》。 × 免责声明！ 本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱[e-mail]删除。 猜您在找 jquery动态生成的select下拉框，怎么设置默认的选中项？ jquery取消选择select下拉框 jQuery对下拉框Select操作总结 bootstrap select下拉框动态数据 angularjs小练习（分别通过ng-repeat和ng-option动态生成select下拉框） layui 下拉框动态添加数据（监听下拉框（select）事件） jquery实现可编辑的下拉框( input + select ) 简单的css,jquery优化select下拉框 jquery如何获取和设置select下拉框中值 JQuery实现的 checkbox 全选；下拉框功能

　　前一阵在项目里需要动态生成下拉框，找了一下用jQuery实现比较方便，这里整理一下。

下文所述方法只是本人在项目中遇到问题的解决方法，场景较为简单，也希望能帮助有需要的朋友

1、动态生成下拉框的两种方式

　　（1）将数据放在model中，JSP页面用EL表达式${}取出，该方式缺点是数据更改时必须刷新整个页面，本文不过多描述。

　　（2）就是本文要说的jQuery动态生成了，该方式适合数据频繁变动的场景。

2、<select>组成

<select>
    <option value=”aaa”>bbb</option>
</select>

以上是一般的<select>格式，可以看到其中每个选项(<option>)需要的属性有value（选择该选项的值）和test（改选项的文本），

所以我一般向前台发送个HashMap的对象，从对象中取出key和value刚好可以用于<select>的value和test

3、jQuery生成下拉框

通过Ajax请求得到下拉框所需数据并生成下拉框，直接上代码

$.ajax({
    type:"GET",
    url:"请求地址",
    success:function(data){
        for(var i in data){             
            $(“selector”).append(“<option value=i>“data[i]</option>
        }
    }
});

其中for(var i in data)可以很方便的遍历对象的属性的所有属性

4、选择<select>

好了既然已经生成下拉框了，那怎么获取下拉框中所选择的数据呢？

可以用jQuery选择到<select>中的<option>并获取其value就可以了

$(“option:selected”).val();

5、最后

本人小白一枚，进入软件行业只有一年时间，促使我开博客的缘起是因为看到了牛人刘未鹏的一篇文章《为什么你从现在开始写博客》，相关经验该文中已介绍的很详细了，朋友们觉得不够过瘾还可以买他写的《暗时间》。