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 相关文章推荐
Jquery 常用方法经典总结
Jan 28 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
Oct 12 Javascript
jquery实现右侧栏菜单选择操作
Mar 04 Javascript
jQuery基本过滤选择器用法示例
Sep 09 Javascript
Javascript之面向对象--方法
Dec 02 Javascript
JavaScript定义函数的三种实现方法
Sep 23 Javascript
webpack-dev-server远程访问配置方法
Feb 22 Javascript
Vue中的基础过渡动画及实现原理解析
Dec 04 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
Apr 28 Javascript
基于layui的下拉列表的数据回显方法
Sep 24 Javascript
js实现旋转木马轮播图效果
Jan 10 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
Sep 16 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网站地图生成类示例
2014/01/13 PHP
新浪SAE搭建PHP项目教程
2015/01/28 PHP
Yii2使用$this-&gt;context获取当前的Module、Controller(控制器)、Action等
2017/03/29 PHP
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
获取IE浏览器Cookie信息的方法
2017/01/23 Javascript
jqueryUI tab标签页代码分享
2017/10/09 jQuery
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
Vue 自定义指令功能完整实例
2019/09/17 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
[01:29]2014DOTA2展望TI 剑指西雅图DK战队专访
2014/06/30 DOTA
[01:02:02]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第二局
2016/02/25 DOTA
在类Unix系统上开始Python3编程入门
2015/08/20 Python
python 遍历列表提取下标和值的实例
2018/12/25 Python
Python字符串内置函数功能与用法总结
2019/04/16 Python
对python中url参数编码与解码的实例详解
2019/07/25 Python
Python3 pickle对象串行化代码实例解析
2020/03/23 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
介绍一下内联、左联、右联
2013/12/31 面试题
机械工程系毕业生求职信
2013/09/27 职场文书
日语系毕业生推荐信
2013/11/11 职场文书
机械制造与自动化应届生求职信
2013/11/16 职场文书
集团公司总经理岗位职责
2013/12/20 职场文书
学生党员思想汇报
2013/12/28 职场文书
岗位聘任书范文
2014/03/29 职场文书
诚信的演讲稿范文
2014/05/12 职场文书
2014年个人售房协议书
2014/10/30 职场文书
2014年安全员工作总结
2014/11/13 职场文书
求职推荐信范文
2015/03/27 职场文书
MySQL 时间类型的选择
2021/06/05 MySQL
python非标准时间的转换
2021/07/25 Python
V Rising 服务器搭建图文教程
2022/06/16 Servers