javascript中select下拉框的用法总结


Posted in Javascript onJanuary 07, 2016

本文针对开发项目中遇到的问题,进行了汇总
问题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>

javascript中select下拉框的用法总结

问题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>

结果图如下:

javascript中select下拉框的用法总结

如果大家还想深入学习,可以点击jquery下拉框效果汇总、JavaScript下拉框效果汇总进行学习。

这就是我在开发中遇到的问题,希望可以对大家的学习有所启发。

Javascript 相关文章推荐
JavaScript 函数惰性载入的实现及其优点介绍
Aug 12 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
Oct 29 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
Mar 16 Javascript
JS中改变this指向的方法(call和apply、bind)
Mar 26 Javascript
Javascript中apply、call、bind的巧妙使用
Aug 18 Javascript
前端面试题及答案整理(二)
Aug 26 Javascript
纯js实现的积木(div层)拖动功能示例
Jul 19 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
Jul 25 Javascript
JS中的防抖与节流及作用详解
Apr 01 Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 Javascript
通过js实现压缩图片上传功能
Feb 25 Javascript
JS浏览器BOM常见操作实例详解
Apr 27 Javascript
详解JS中Array对象扩展与String对象扩展
Jan 07 #Javascript
js创建对象的方法汇总
Jan 07 #Javascript
JavaScript截取、切割字符串的技巧
Jan 07 #Javascript
js确认框confirm()用法实例详解
Jan 07 #Javascript
实例讲解jquery与json的结合
Jan 07 #Javascript
javascript仿百度输入框提示自动下拉补全
Jan 07 #Javascript
基于jquery实现表格无刷新分页
Jan 07 #Javascript
You might like
php设置编码格式的方法
2013/03/05 PHP
phpQuery占用内存过多的处理方法
2013/11/13 PHP
PHP中遇到BOM、编码导致json_decode函数无法解析问题
2014/07/02 PHP
javascript工厂方式定义对象
2014/12/26 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
2017/08/16 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
小程序中this.setData的使用和注意事项
2019/08/28 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
微信小程序用户盒子、宫格列表的实现
2020/07/01 Javascript
JS设计模式之责任链模式实例详解
2018/02/03 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
python实现超市商品销售管理系统
2019/11/22 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
Python如何省略括号方法详解
2020/03/21 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
详解Python中import机制
2020/09/11 Python
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
台湾专柜女包:KINAZ
2019/12/26 全球购物
外语系大学生自荐信范文
2014/03/01 职场文书
空乘英文求职信
2014/04/13 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书
故意伤害罪辩护词
2015/05/21 职场文书
惊天动地观后感
2015/06/10 职场文书
运动会广播稿200字
2015/08/19 职场文书
大学校园餐饮创业计划书
2019/08/07 职场文书
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript