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 简单导航实现代码
Sep 11 Javascript
JS模拟面向对象全解(一、类型及传递)
Jul 13 Javascript
js获取location.href的参数实例代码
Aug 02 Javascript
基于jQuery实现最基本的淡入淡出效果实例
Feb 02 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 Javascript
基于 Vue 的树形选择组件的示例代码
Aug 18 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 Javascript
electron demo项目npm install安装失败的解决方法
Feb 06 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
Sep 27 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
ant-design-vue中tree增删改的操作方法
Nov 03 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实现读取内存顺序号
2015/03/29 PHP
CI框架附属类用法分析
2018/12/26 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
js tab效果的实现代码
2009/12/26 Javascript
javascript encodeURI和encodeURIComponent的比较
2010/04/03 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
JavaScript实现广告弹窗效果
2016/08/09 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
2017/01/17 Javascript
jQuery实现图片滑动效果
2017/03/08 Javascript
Bootstrap如何激活导航状态
2017/03/22 Javascript
AngularJS实现进度条功能示例
2017/07/05 Javascript
javascript+html5+css3自定义弹出窗口效果
2017/10/26 Javascript
详解webpack+express多页站点开发
2017/12/22 Javascript
Vue-cli项目获取本地json文件数据的实例
2018/03/07 Javascript
详解Vue 如何监听Array的变化
2019/06/06 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
Python常用模块用法分析
2014/09/08 Python
详解Python的Django框架中的Cookie相关处理
2015/07/22 Python
黑科技 Python脚本帮你找出微信上删除你好友的人
2016/01/07 Python
用十张图详解TensorFlow数据读取机制(附代码)
2018/02/06 Python
对Python中range()函数和list的比较
2018/04/19 Python
Python3.5面向对象程序设计之类的继承和多态详解
2019/04/24 Python
python实现多进程按序号批量修改文件名的方法示例
2019/12/30 Python
python数字类型math库原理解析
2020/03/02 Python
python进度条显示之tqmd模块
2020/08/22 Python
HTML5 解析规则分析
2009/08/14 HTML / CSS
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
Giglio俄罗斯奢侈品购物网:男士、女士、儿童高级时装
2018/07/27 全球购物
C#面试题
2016/05/06 面试题
素食餐饮项目创业计划书
2014/02/02 职场文书
大学生见习报告范文
2014/11/03 职场文书
党支部书记岗位职责
2015/02/15 职场文书
运动会入场词
2015/07/18 职场文书
小学生节约用水倡议书
2019/08/12 职场文书
SQL Server2019数据库之简单子查询的具有方法
2021/04/27 SQL Server