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实现ajax提交form表单的方法总结
Mar 03 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
Jan 14 Javascript
用js写的一个路由(简单实例)
Sep 24 Javascript
js实现非常棒的弹出div
Oct 06 Javascript
如何将百度地图包装成Vue的组件的方法步骤
Feb 12 Javascript
微信小程序wx.request拦截器使用详解
Jul 09 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
Sep 21 Javascript
在weex中愉快的使用scss的方法步骤
Jan 02 Javascript
js get和post请求实现代码解析
Feb 06 Javascript
vue 实现超长文本截取,悬浮框提示
Jul 29 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 Javascript
利用JavaScript为句子加标题的3种方法示例
Jan 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中实现汉字转区位码应用源码实例解析
2010/06/14 PHP
php var_export与var_dump 输出的不同
2013/08/09 PHP
JavaScript Konami Code 实现代码
2009/07/29 Javascript
使用jQuery简化Ajax开发 Ajax开发入门
2009/10/14 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
2014/02/13 Javascript
jquery插件推荐 jquery.cookie
2014/11/09 Javascript
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
JavaScript String 对象常用方法总结
2016/04/28 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
2018/03/08 Javascript
vue实现中部导航栏布局功能
2019/07/30 Javascript
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
基于JavaScript获取url参数2种方法
2020/04/17 Javascript
js实现限定范围拖拽的示例
2020/10/26 Javascript
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/26 Python
Selenium定位元素操作示例
2018/08/10 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
什么是Smarty变量操作符?如何使用Smarty变量操作符
2014/07/18 面试题
精彩的英文自荐信
2014/01/30 职场文书
军训自我鉴定范文
2014/02/13 职场文书
大学生个人先进事迹材料范文
2014/05/03 职场文书
2014年大学生村官工作总结
2014/11/19 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
关于感谢信的范文
2015/01/23 职场文书
一劳永逸彻底解决pip install慢的办法
2021/05/24 Python
Spring Bean的实例化之属性注入源码剖析过程
2021/06/13 Java/Android
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技