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 change,propertychange,input事件小议
Dec 20 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
Oct 11 Javascript
jquery特效 幻灯片效果示例代码
Jul 16 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
Apr 25 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
May 12 Javascript
JavaScript日期类型的一些用法介绍
Mar 02 Javascript
js如何打印object对象
Oct 16 Javascript
Javascript缓存API
Jun 14 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
May 20 Javascript
package.json配置文件构成详解
Aug 27 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 Javascript
解决vue字符串换行问题(绝对管用)
Aug 06 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
BBS(php &amp; mysql)完整版(五)
2006/10/09 PHP
php使用文本统计访问量的方法
2016/05/12 PHP
PHP面向对象类型约束用法分析
2019/06/12 PHP
JS中数组Array的用法示例介绍
2014/02/20 Javascript
jQuery基础知识小结
2014/12/22 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
2015/03/04 Javascript
JS实现点击按钮自动增加一个单元格的方法
2015/03/09 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
2016/03/01 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
2017/07/20 Javascript
Javascript中的getter和setter初识
2017/08/17 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
2017/11/06 Javascript
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
支付宝小程序tabbar底部导航
2018/11/06 Javascript
使用Angular material主题定义自己的组件库的配色体系
2019/09/04 Javascript
vue项目实现图片上传功能
2019/12/23 Javascript
js代码编写无缝轮播图
2020/09/13 Javascript
vue 动态创建组件的两种方法
2020/12/31 Vue.js
[59:08]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第一局
2016/02/27 DOTA
[01:38]2018DOTA2亚洲邀请赛主赛事第二日现场采访 神秘商人痛陈生计不易
2018/04/05 DOTA
Python json模块使用实例
2015/04/11 Python
深入理解Python中命名空间的查找规则LEGB
2015/08/06 Python
Python 递归函数详解及实例
2016/12/27 Python
python主线程捕获子线程的方法
2018/06/17 Python
python实现图片识别汽车功能
2018/11/30 Python
Python中的枚举类型示例介绍
2019/01/09 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
基于python实现模拟数据结构模型
2020/06/12 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
不开辟用于交换数据的临时空间,如何完成字符串的逆序
2012/12/02 面试题
大学生学年个人总结
2015/02/15 职场文书
火锅店的开业营销方案范本!
2019/07/05 职场文书