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 相关文章推荐
innerHTML,outerHTML,innerTEXT三者之间的区别
Jan 28 Javascript
JavaScript asp.net 获取当前超链接中的文本
Apr 14 Javascript
JQuery团队打造的javascript单元测试工具QUnit介绍
Feb 26 Javascript
JS 自定义带默认值的函数
Jul 21 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
May 19 Javascript
javascript 寻找错误方法整理
Jun 15 Javascript
关于JavaScript的变量的数据类型的判断方法
Aug 14 Javascript
setTimeout学习小结
Feb 08 Javascript
Vue实现动态响应数据变化
Apr 28 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
Feb 22 Javascript
js脚本中执行java后台代码方法解析
Oct 11 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 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
Syphon 秘笈
2021/03/03 冲泡冲煮
php 操作excel文件的方法小结
2009/12/31 PHP
php获取从html表单传递数组的方法
2015/03/20 PHP
PHP如何实现Unicode和Utf-8编码相互转换
2015/07/29 PHP
PHP接收json 并将接收数据插入数据库的实现代码
2015/12/01 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
JS的Document属性和方法小结
2013/09/17 Javascript
js将json格式内容转换成对象的方法
2013/11/01 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
2015/12/22 Javascript
详解Bootstrap glyphicons字体图标
2016/01/04 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
2016/09/06 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
2016/11/29 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
2016/12/14 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
2017/12/11 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
JavaScript实现百度搜索框效果
2020/03/26 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
Vuex的各个模块封装的实现
2020/06/05 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
[52:03]Secret vs VG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
详解Golang 与python中的字符串反转
2017/07/21 Python
今天 平安夜 Python 送你一顶圣诞帽 @微信官方
2017/12/25 Python
Python制作exe文件简单流程
2019/01/24 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
创业计划书如何编写
2014/02/06 职场文书
抄作业检讨书
2014/02/17 职场文书
2014年元旦促销活动方案
2014/02/22 职场文书
工伤赔偿协议书范本
2014/04/15 职场文书
项目战略合作意向书
2015/05/08 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
启迪人心的励志语录:脾气永远不要大于本事
2020/01/02 职场文书
正确使用MySQL INSERT INTO语句
2021/05/26 MySQL