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 jsonp 使用示例代码
Aug 12 Javascript
DWZ table的原生分页浅谈
Mar 01 Javascript
from表单多个按钮提交用onclick跳转不同action
Apr 24 Javascript
简单的jquery左侧导航栏和页面选中效果
Aug 21 Javascript
JavaScript中Math对象的方法介绍
Jan 05 Javascript
详解vue静态资源打包中的坑与解决方案
Feb 05 Javascript
javascript json字符串到json对象转义问题
Jan 22 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
Feb 28 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 Javascript
vuex管理状态仓库使用详解
Jul 29 Javascript
Vue 数据绑定的原理分析
Nov 16 Javascript
js实现弹框效果
Mar 24 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代码把全角数字转为半角数字
2007/12/10 PHP
php字符串截取中文截取2,单字节截取模式
2007/12/10 PHP
php minixml详解
2008/07/19 PHP
PHP parse_url 一个好用的函数
2009/10/03 PHP
destoon调用企业会员公司形象图片的实现方法
2014/08/21 PHP
ThinkPHP项目分组配置方法分析
2016/03/23 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
PHP的PDO事务与自动提交
2019/01/24 PHP
jquery实现勾选复选框触发事件给input赋值
2015/02/01 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
2015/06/05 Javascript
JavaScript判断按钮被点击的方法
2015/12/13 Javascript
JQuery实现网页右侧随动广告特效
2016/01/17 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
2018/02/01 Javascript
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
javascript中join方法实例讲解
2019/02/21 Javascript
JS中比Switch...Case更优雅的多条件判断写法
2019/09/05 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
2020/08/13 Javascript
[03:12]TI9战队档案 - Virtus Pro
2019/08/20 DOTA
以一个投票程序的实例来讲解Python的Django框架使用
2016/02/18 Python
Python实现Linux中的du命令
2017/06/12 Python
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
Pandas Shift函数的基础入门学习笔记
2018/11/16 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
Python Web版语音合成实例详解
2019/07/16 Python
Python使用sys.exc_info()方法获取异常信息
2020/07/23 Python
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
中专生的个人自我评价
2013/12/11 职场文书
建筑公司员工自我鉴定
2014/04/08 职场文书
探亲假请假条
2014/04/11 职场文书
交通事故协议书范文
2014/10/23 职场文书
小学四年级作文之人物作文
2019/11/06 职场文书
Python如何使用logging为Flask增加logid
2021/03/30 Python
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis
Win11运行cmd提示“请求的操作需要提升”的两种解决方法
2022/07/07 数码科技