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 iframe内的函数调用实现方法
Jul 19 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
Jun 23 Javascript
jQuery对象的length属性用法实例
Dec 27 Javascript
JS获取图片高度宽度的方法分享
Apr 17 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
May 15 Javascript
js实现创建删除html元素小结
Sep 30 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
Dec 20 Javascript
谈谈JavaScript的New关键字
Aug 26 Javascript
微信小程序开发之自定义tabBar的实现
Sep 06 Javascript
element ui table 增加筛选的方法示例
Nov 02 Javascript
JS回调函数 callback的理解与使用案例分析
Sep 09 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 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对图像的各种处理函数代码小结
2013/07/08 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
javascript IE中的DOM ready应用技巧
2008/07/23 Javascript
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
js实现Select头像选择实时预览代码
2015/08/17 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
2016/12/02 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
js正则表达式验证表单【完整版】
2017/03/06 Javascript
VSCode中如何利用d.ts文件进行js智能提示
2018/04/13 Javascript
小程序中英文混合排序问题解决
2019/08/02 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
Python 调用VC++的动态链接库(DLL)
2008/09/06 Python
基于进程内通讯的python聊天室实现方法
2015/06/28 Python
利用Python实现网络测试的脚本分享
2017/05/26 Python
python 自动重连wifi windows的方法
2018/12/18 Python
简单了解python协程的相关知识
2019/08/31 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
Cotton On香港网站:澳洲时装连锁品牌
2018/11/01 全球购物
省三好学生申请材料
2014/01/22 职场文书
施工员岗位职责
2014/03/16 职场文书
忠诚教育心得体会
2014/09/03 职场文书
公务员年度考核评语
2014/12/31 职场文书
2015年八一建军节活动总结
2015/03/20 职场文书
工程部岗位职责范本
2015/04/11 职场文书
初中政治教师教学反思
2016/02/23 职场文书
个人房屋租赁合同(标准范本)
2019/09/16 职场文书
导游词之岳阳楼
2019/09/25 职场文书
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python
Pandas 稀疏数据结构的实现
2021/07/25 Python