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 实现??打印?理
Apr 28 Javascript
javascript 设置文本框中焦点的位置
Nov 20 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
Aug 17 Javascript
关于jQuery UI 使用心得及技巧
Oct 10 Javascript
仿JQuery输写高效JSLite代码的一些技巧
Jan 13 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
May 24 Javascript
jquery自适应布局的简单实例
May 28 Javascript
用iframe实现不刷新整个页面上传图片的实例
Nov 18 Javascript
ES6 Generator函数的应用实例分析
Jun 26 Javascript
解决layui富文本编辑器图片上传无法回显的问题
Sep 18 Javascript
使用p5.js实现动态GIF图片临摹重现
Oct 23 Javascript
详解Vue的组件中data选项为什么必须是函数
Aug 17 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
CI框架中zip类应用示例
2014/06/17 PHP
php使用array_search函数实现数组查找的方法
2015/06/12 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
php版微信小店调用api示例代码
2016/11/12 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
图片在浏览器中底部对齐 解决方法之一
2011/11/30 Javascript
全面理解面向对象的 JavaScript(来自ibm)
2013/11/10 Javascript
jQuery中:nth-child选择器用法实例
2014/12/31 Javascript
JavaScript的事件代理和委托实例分析
2015/03/25 Javascript
JS表单验证的代码(常用)
2016/04/08 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
微信小程序 122100版本更新问题解决方案
2016/12/22 Javascript
JavaScript设计模式之策略模式详解
2017/06/09 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
2017/11/22 Javascript
讲解vue-router之什么是动态路由
2018/05/28 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
关于Vue源码vm.$watch()内部原理详解
2019/04/26 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
2019/09/25 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
2019/10/23 jQuery
Node对CommonJS的模块规范
2019/11/06 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
jquery检测上传文件大小示例
2020/04/26 jQuery
python修改字典内key对应值的方法
2015/07/11 Python
Python实现微信机器人的方法
2019/09/06 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
什么是ESB?请介绍一下ESB?
2015/05/27 面试题
食品营养与检测应届生求职信
2013/11/08 职场文书
艺术教育实施方案
2014/05/03 职场文书
新生入学欢迎词
2015/01/26 职场文书
秋菊打官司观后感
2015/06/03 职场文书
Python机器学习之PCA降维算法详解
2021/05/19 Python
python 单机五子棋对战游戏
2022/04/28 Python