前一阵在项目里需要动态生成下拉框,找了一下用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>下拉框的更多相关文章

  1. angularjs小练习(分别通过ng-repeat和ng-option动态生成select下拉框)

    本次做一个简单的关于动态生成select的练习 在实现上有两种方式: 其一.通过ng-repeat来实现 其二.通过ng-option来实现 在页面效果上,两种实现的效果都一样 但是在数据选择的数据从 ...

  2. jquery选中将select下拉框中一项后赋值给text文本框

    jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...

  3. jquery取消选择select下拉框

    有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: <select name=&q ...

  4. jQuery插件实现select下拉框左右选择_交换内容(multiselect2side)

    效果图: 使用jQuery插件---multiselect2side做法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio ...

  5. 一款基于jQuery的联动Select下拉框

    今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这 ...

  6. jQuery操作选中select下拉框的值

    js和jQuery联合操作dom真的很好用,如果不是专业前端人员的话,我觉得吧前端语言只要熟练掌握js和jQuery就可以了. 获取select下拉框的几种情况如下: 1.获取第一个option的值 ...

  7. 【jquery】ajax 动态 改变 select下拉框选中的值

    //JS<script type="text/javascript> //ajax动态给添加原料的[商品名称]下拉框绑定selected属性 $("#origin_co ...

  8. java动态生成带下拉框的Excel导入模板

    在实际开发中,由于业务需要,常常需要进行Excel导入导出操作.以前做一些简单的导入时,先准备一个模板,再进行导入,单有十几. 二十几个导入模板时,往往要做十几.二十几个模板.而且,当在模板中需要有下 ...

  9. jquery实现模拟select下拉框效果

    <IGNORE_JS_OP style="WORD-WRAP: break-word"> <!DOCTYPE html PUBLIC "-//W3C// ...

随机推荐

  1. (Java实现) 昆虫繁殖

    昆虫繁殖 时间限制: 1 Sec 内存限制: 128 MB 提交: 25 解决: 16 [提交][状态][讨论版][命题人:quanxing] 题目描述 科学家在热带森林中发现了一种特殊的昆虫,这种昆 ...

  2. Java实现 蓝桥杯VIP 算法训练 Hankson的趣味题

    问题描述 Hanks 博士是BT (Bio-Tech,生物技术) 领域的知名专家,他的儿子名叫Hankson.现 在,刚刚放学回家的Hankson 正在思考一个有趣的问题. 今天在课堂上,老师讲解了如 ...

  3. Java实现 蓝桥杯VIP 算法提高 勾股数

    算法提高 勾股数 时间限制:1.0s 内存限制:256.0MB 问题描述 勾股数是一组三个自然数,a < b < c,以这三个数为三角形的三条边能够形成一个直角三角形 输出所有a + b ...

  4. Java实现 LeetCode 84 柱状图中最大得矩形

    84. 柱状图中最大的矩形 给定 n 个非负整数,用来表示柱状图中各个柱子的高度.每个柱子彼此相邻,且宽度为 1 . 求在该柱状图中,能够勾勒出来的矩形的最大面积. 以上是柱状图的示例,其中每个柱子的 ...

  5. Java实现 LeetCode 55 跳跃游戏

    55. 跳跃游戏 给定一个非负整数数组,你最初位于数组的第一个位置. 数组中的每个元素代表你在该位置可以跳跃的最大长度. 判断你是否能够到达最后一个位置. 示例 1: 输入: [2,3,1,1,4] ...

  6. Java实现 洛谷 P1487 陶陶摘苹果(升级版)

    题目描述 又是一年秋季时,陶陶家的苹果树结了n个果子.陶陶又跑去摘苹果,这次她有一个a公分的椅子.当他手够不着时,他会站到椅子上再试试. 这次与NOIp2005普及组第一题不同的是:陶陶之前搬凳子,力 ...

  7. js动态绑定class(当前父级div下的子元素有没有这个class,有的话移除,没有的话添加)

    <div class="layui-inline" id=‘’   onclick="changeType(id)">                ...

  8. Centos6.5--svn搭建

    0x01 配置好镜像源安装svn yum install subversion -y 0x02 安装完成之后在/opt下面新建一个svn的目录,当然也可以在其他的地方建立svn目录,这个看个人爱好. ...

  9. Nice Jquery Validator 快速上手

    (1).直接引用 一行代码引入插件,local 参数用来加载对应的配置文件.如果不传 local 参数,配置以及样式就需要自行引入. <script src="path/to/nice ...

  10. JS中的各类运算符

    2020-04-15 JS中的各类运算符 // 假设有如下代码,那么a(10)的返回结果是?( ) function a(a) { a^=(1<<4)-1; return a; } // ...