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 相关文章推荐
js实现运动logo图片效果及运动元素对象sportBox使用方法
Dec 25 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
Aug 12 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
Apr 29 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 Javascript
AngularJS基础 ng-src 指令简单示例
Aug 03 Javascript
jQuery包裹节点用法完整示例
Sep 13 Javascript
详解Javascript函数声明与递归调用
Oct 22 Javascript
jquery代码规范让代码越来越好看
Feb 03 Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 Javascript
Javasript设计模式之链式调用详解
Apr 26 Javascript
Nginx设置为Node.js的前端服务器方法总结
Mar 27 Javascript
前端天气插件tpwidget使用方法详解
Jun 24 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
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
日历查询的算法 如何计算某一天是星期几
2012/12/12 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
javascript中字符串拼接详解
2014/09/26 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
2014/10/14 Javascript
javascript关于继承的用法汇总
2014/12/20 Javascript
AngularJS中处理多个promise的方式
2016/02/02 Javascript
JS中frameset框架弹出层实例代码
2016/04/01 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
2016/08/23 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
2017/04/19 Javascript
Vue.js实现的表格增加删除demo示例
2018/05/22 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
vue项目中引入Sass实例方法
2019/08/27 Javascript
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
为什么推荐使用JSX开发Vue3
2020/12/28 Vue.js
[44:15]国士无双DOTA2 6.82版本详解(上)
2014/09/28 DOTA
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
HTML中使用python屏蔽一些基本功能的方法
2017/07/07 Python
Python3网络爬虫之使用User Agent和代理IP隐藏身份
2017/11/23 Python
Python3自动签到 定时任务 判断节假日的实例
2018/11/13 Python
Python数据报表之Excel操作模块用法分析
2019/03/11 Python
Python requests模块基础使用方法实例及高级应用(自动登陆,抓取网页源码)实例详解
2020/02/14 Python
python 8种必备的gui库
2020/08/27 Python
python实现简单的tcp 文件下载
2020/09/16 Python
CSS3图片旋转特效(360/60/-360度)
2013/10/10 HTML / CSS
分享29个基于Bootstrap的HTML5响应式网页设计模板
2015/11/19 HTML / CSS
项目合作计划书
2014/01/09 职场文书
学雷锋月活动总结
2014/04/25 职场文书
师德师风自我评价范文
2014/09/11 职场文书
婚庆答谢词大全
2015/09/29 职场文书
文艺委员竞选稿
2015/11/19 职场文书
python基础入门之普通操作与函数(三)
2021/06/13 Python
Python anaconda安装库命令详解
2021/10/16 Python
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android
Python数组变形的几种实现方法
2022/05/30 Python