jQuery动态生成select下拉框

最新推荐文章于 2025-05-26 10:36:44 发布

梓沂

最新推荐文章于 2025-05-26 10:36:44 发布

阅读量9.9k

点赞数 2

文章标签： jquery select

本文介绍使用jQuery动态生成<select>下拉框的方法。包括通过Ajax请求获取数据，并利用jQuery遍历数据生成下拉选项。同时介绍了如何选择并获取<select>中的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

https://www.cnblogs.com/zorroyz/p/5559725.html

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();