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的height()、width()计算动态插入的IMG标签的宽高的问题
Dec 08 Javascript
某人初学javascript的时候写的学习笔记
Dec 30 Javascript
javascript 树形导航菜单实例代码
Aug 13 Javascript
实现图片预加载的三大方法及优缺点分析
Nov 19 Javascript
jQuery过滤选择器用法分析
Feb 10 Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 Javascript
javascript中JSON.parse()与eval()解析json的区别
May 19 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
Oct 31 Javascript
Vue.js组件通信的几种姿势
Oct 23 Javascript
vue项目中应用ueditor自定义上传按钮功能
Apr 27 Javascript
在Vue中获取组件声明时的name属性方法
Sep 12 Javascript
js实现图片3D轮播效果
Sep 21 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下目前为目最全的CURL中文说明
2010/08/01 PHP
php中经典方法实现判断多维数组是否为空
2011/10/23 PHP
php实现encode64编码类实例
2015/03/24 PHP
PHP中的静态变量及static静态变量使用详解
2015/11/05 PHP
thinkPHP模板中for循环与switch语句用法示例
2016/11/30 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
PHP实现的MD5结合RSA签名算法实例
2017/10/07 PHP
PHP explode()函数用法讲解
2019/02/15 PHP
使用jquery为table动态添加行的实现代码
2011/03/30 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
页面刷新时记住滚动条的位置jquery代码
2014/06/17 Javascript
js拼接html注意问题示例探讨
2014/07/14 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
一个JavaScript防止表单重复提交的实例
2014/10/21 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
2016/01/08 Javascript
JS中常用的正则表达式
2016/09/29 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
vue请求本地自己编写的json文件的方法
2019/04/25 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
2019/09/10 jQuery
Ant Design Vue table中列超长显示...并加提示语的实例
2020/10/31 Javascript
JS实现页面侧边栏效果探究
2021/01/08 Javascript
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
python unittest实现api自动化测试
2018/04/04 Python
TensorFlow实现非线性支持向量机的实现方法
2018/04/28 Python
对Python中gensim库word2vec的使用详解
2018/05/08 Python
解决Python找不到ssl模块问题 No module named _ssl的方法
2019/04/29 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
pygame实现弹球游戏
2020/04/14 Python
Jupyter Notebook的连接密码 token查询方式
2020/04/21 Python
matplotlib基础绘图命令之bar的使用方法
2020/08/13 Python
Python解析微信dat文件的方法
2020/11/30 Python
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
英国网上花店:Bunches
2016/11/29 全球购物
群众路线教育实践活动整改方案(个人版)
2014/10/25 职场文书