jQuery动态生成<select>下拉框

标签：

　　前一阵在项目里需要动态生成下拉框，找了一下用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、最后

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

jQuery动态生成<select>下拉框

标签：

原文地址：http://www.cnblogs.com/zorroyz/p/5559725.html