jquery获取select,option所有的value和text的实例


Posted in Javascript onMarch 06, 2017

想想学习jQuery也有几天了,然后今天由于工作需要,我需要把select对应下的option所有的value和

text获取出来,然后拼接,导入到xml文件中,结果搞了一下午,终于搞出来了。下面是对应的代码:

<body>中的代码是从别人的网站上复制过来的,我现在需要获取它的value和text,然后拼接成

<朝阳>7</朝阳>的形式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
 <script type="text/javascript" language="javascript" > 
 $(document).ready(function(){ //等待所有dom绘制完成后就执行
  
     var arr = new Array(); //数组定义标准形式,不要写成Array arr = new Array();
     var all = ""; //定义变量全部保存
     $("#UserBorough option").each(function () {
       var txt = $(this).text(); //获取单个text
       var val = $(this).val(); //获取单个value
       var node = "<" + txt + ">" + val + "</" + txt + ">";
       arr.push(node);
       all += node;
     });
     alert(all);
     alert(arr);

  
 }); //$(document)
 </script>
</head>
<body>

 <select name="UserBorough" size="6" class="input" id="UserBorough" style="width:150px;" onchange="setSmallBorough('UserBorough','SmallBorough','/search_auto.aspx?searchtype=Borough&searchkey='+ this.options[this.selectedIndex].value +'','');">
            <option value=7>朝阳</option><option value=1>海淀</option><option value=4>昌平</option><option value=8>丰台</option><option value=14>大兴</option><option value=2>东城</option><option value=3>西城</option><option value=5>崇文</option><option value=6>宣武</option><option value=12>通州</option><option value=13>顺义</option><option value=11>房山</option><option value=9>石景山</option><option value=10>门头沟</option><option value=15>怀柔</option><option value=18>密云</option><option value=17>延庆</option><option value=16>平谷</option><option value=448>周边</option>
</select>



</body>
</html>

总结:结合工具能省很大的事,你可以在VS2010中新建一个html文件敲代码,然后把代码复制到

Dreamweaver中运行,这样会很节省时间。

通过这个例子,我认识到,仅仅把书上的那些代码看懂,照着敲下来,你不一定能写出东西,还是要多动手

自己写。

以上这篇jquery获取select,option所有的value和text的实例)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
var与Javascript变量隐式声明
Sep 17 Javascript
JavaScript Object的extend是一个常用的功能
Dec 02 Javascript
js弹出层永远居中实现思路及代码
Nov 29 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
Feb 28 Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
Aug 05 Javascript
利用vue.js插入dom节点的方法
Mar 15 Javascript
深入理解ES7的async/await的用法
Sep 09 Javascript
为什么我们要做三份 Webpack 配置文件
Sep 18 Javascript
bootstrap table支持高度百分比的实例代码
Feb 28 Javascript
小程序实现带年月选取效果的日历
Jun 27 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 Javascript
Bootstrap按钮组简单实现代码
Mar 06 #Javascript
Bootstrap组合上、下拉框简单实现代码
Mar 06 #Javascript
Javascript中引用类型传递的知识点小结
Mar 06 #Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 #Javascript
js正则表达式验证表单【完整版】
Mar 06 #Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
Mar 06 #Javascript
js实现动态显示时间效果
Mar 06 #Javascript
You might like
php实现购物车功能(上)
2020/07/23 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
使用phpQuery获取数组的实例
2017/03/13 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
javascript 获取页面的高度及滚动条的位置的代码
2010/05/06 Javascript
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
使用jQuery实现返回顶部
2015/01/26 Javascript
javascript顺序加载图片的方法
2015/07/18 Javascript
使用JQuery实现智能表单验证功能
2016/03/08 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
2016/09/05 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
JQuery中解决重复动画的方法
2016/10/17 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
Bootstrap Table使用整理(二)
2017/06/09 Javascript
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
2021/02/08 Javascript
python中kmeans聚类实现代码
2018/02/23 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
python requests.get带header
2020/05/05 Python
TIME时代杂志台湾总代理:台时亚洲
2018/10/22 全球购物
广播电视新闻学专业应届生求职信
2013/10/08 职场文书
四年大学生活的自我评价范文
2014/02/07 职场文书
财务主管岗位职责
2014/02/28 职场文书
软件专业毕业生个人自我鉴定
2014/04/17 职场文书
医学专业毕业生推荐信
2014/07/12 职场文书
2014年标准化工作总结
2014/12/17 职场文书
中学政教处工作总结
2015/08/13 职场文书
小学生大队委竞选稿
2015/11/20 职场文书
大学迎新生的欢迎词
2019/06/25 职场文书
使用Redis实现实时排行榜功能
2021/07/02 Redis