开发中select下拉框的用法总结
2015-09-21 21:14
295 查看
select在开发中经常被用到,用于进行选项选择,我浅谈下select的用法
问题(1)如何选择select的option里面的值?
首先会用到一个方法 onchange();这个方法主要用于触发,选择框内容改变时间
实现代码:
![](https://img-blog.csdn.net/20150921204243124)
问题2:可是在开发中,我们一般选择了内容只是为了显示,而真正要做的是和后台进行交互数据传输,这时候,我们为了尽可能减少http数据传输,所以一般会传 id 等作为数据传输标志,如何做?
开发中,option一般都是动态创建的,那么这时候,我们只需要给你动态创建一个自定义属性。那么如何获取自定义属性呢?
结果图如下:
![](https://img-blog.csdn.net/20150921211150490)
这就是我在开发中遇到的问题
问题(1)如何选择select的option里面的值?
首先会用到一个方法 onchange();这个方法主要用于触发,选择框内容改变时间
实现代码:
<!doctype html> <html> <head lang="en"> <meta charset="UTF-8"> </head> <body> <select onchange="test(event)"> <option>安静</option> <option>晴天</option> <option>七里香</option> </select> <script type="text/javascript"> function test (e) { var e = event ? event : window.event; alert(e.target.value); } </script> </body> </html>
问题2:可是在开发中,我们一般选择了内容只是为了显示,而真正要做的是和后台进行交互数据传输,这时候,我们为了尽可能减少http数据传输,所以一般会传 id 等作为数据传输标志,如何做?
开发中,option一般都是动态创建的,那么这时候,我们只需要给你动态创建一个自定义属性。那么如何获取自定义属性呢?
<!doctype html> <html> <head lang="en"> <meta charset="UTF-8"> </head> <body> <select onchange="test(event)" id="sel"></select> <script type="text/javascript"> //定义内容的json数据,一般从后台获取 var data = [ { name: '晴天', id: '1' }, { name: '安静', id: '2' }, { name: '七里香', id: '3' } ]; createOption('sel',data); //创建option function createOption(parentId, data){ var parentId = document.getElementById(parentId); for(var i=0; i<data.length; i++){ var opt = document.createElement('option'); //设置option的值 opt.innerHTML = data[i].name; //定义option的自定义值 opt.setAttribute('dataid', data[i].id); parentId.appendChild(opt); } } //选取自定义属性的方法 function test (e) { var e = event ? event : window.event; var target = e.target; var index = target.selectedIndex; alert("我的id="+target[index].getAttribute('dataid')); } </script> </body> </html>
结果图如下:
这就是我在开发中遇到的问题
相关文章推荐
- Lua编程示例(一):select、debug、可变参数、table操作、error
- SQL学习笔记三 select语句的各种形式小结
- 一条select语句引起的瓶颈问题思考
- SQL Select语句完整的执行顺序
- mysql SELECT语句去除某个字段的重复信息
- 点击按钮后 文本框变为Select下拉列表框
- javascript 模拟select下拉列表特效
- javascript select options 排序(保持option 对象完整性)
- 用javascript和css模拟select的脚本
- js select常用操作控制代码
- mysql中insert与select的嵌套使用方法
- jquery的clone方法应用于textarea和select的bug修复
- SQLServer中SELECT语句的执行顺序
- MySQL进阶SELECT语法篇
- asp中 select top 问题!~
- ASP中获得Select Count语句返回值的方法
- 数据库插入数据之select into from与insert into select区别详解
- Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
- jQuery实现的仿select功能代码
- jquery操作select方法汇总