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 相关文章推荐
你真的了解JavaScript吗?
Feb 24 Javascript
基于jQuery的一个扩展form序列化到json对象
Dec 09 Javascript
JQuery AJAX 中文乱码问题解决
Jun 05 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
Aug 15 Javascript
理解javascript对象继承
Apr 17 Javascript
简单理解js的冒泡排序
Dec 19 Javascript
angular2模块和共享模块详解
Apr 08 Javascript
JavaScript实现一个简易的计算器实例代码
May 10 Javascript
原生javascript实现连连看游戏
Jan 03 Javascript
JavaScript观察者模式原理与用法实例详解
Mar 10 Javascript
如何使用原生Js实现随机点名详解
Jan 06 Javascript
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
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建立文件夹代码
2015/01/06 PHP
php合并数组并保留键值的实现方法
2018/03/12 PHP
javascript 屏蔽鼠标键盘的几段代码
2008/01/02 Javascript
jquery 插件 人性化的消息显示
2008/01/21 Javascript
javascript 学习之旅 (3)
2009/02/05 Javascript
一些相见恨晚的 JavaScript 技巧
2010/04/25 Javascript
有道JavaScript监听浏览器的问题
2010/06/23 Javascript
简单总结JavaScript中的String字符串类型
2016/05/26 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
JavaScript生成.xls文件的代码
2016/12/22 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
vue项目中引入noVNC远程桌面的方法
2018/03/05 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
JavaScript实现拖拽功能
2020/02/11 Javascript
python创建一个最简单http webserver服务器的方法
2015/05/08 Python
在win和Linux系统中python命令行运行的不同
2016/07/03 Python
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
基于python批量处理dat文件及科学计算方法详解
2018/05/08 Python
Python实现ping指定IP的示例
2018/06/04 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
Python json读写方式和字典相互转化
2020/04/18 Python
应届行政管理专业个人自我评价
2013/12/28 职场文书
工地资料员岗位职责
2013/12/31 职场文书
运动会广播稿500字
2014/01/28 职场文书
知识竞赛活动方案
2014/02/18 职场文书
小学生新年寄语
2014/04/03 职场文书
师德师风建设整改措施思想汇报
2014/10/11 职场文书
保送生自荐信范文
2015/03/26 职场文书
结婚堵门保证书
2015/05/08 职场文书
Ajax请求超时与网络异常处理图文详解
2021/05/23 Javascript
SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用
2021/06/30 SQL Server
postgresql 删除重复数据案例详解
2021/08/02 PostgreSQL
《王者天下》第4季首话新剧照 4月9日正式开播
2022/04/07 日漫
sql server偶发出现死锁的解决方法
2022/04/10 SQL Server