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 相关文章推荐
js GridView 实现自动计算操作代码
Mar 25 Javascript
js获取input标签的输入值实现代码
Aug 05 Javascript
详解JavaScript函数绑定
Aug 18 Javascript
JavaScript中的闭包介绍
Mar 15 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 Javascript
jquery自定义插件——window的实现【示例代码】
May 06 Javascript
js实现动态创建的元素绑定事件
Jul 19 Javascript
原生js实现日期计算器功能
Feb 17 Javascript
webpack教程之webpack.config.js配置文件
Jul 05 Javascript
浅谈JavaScript find 方法不支持IE的问题
Sep 28 Javascript
详解extract-text-webpack-plugin 的使用及安装
Jun 12 Javascript
vue下history模式刷新后404错误解决方法
Aug 18 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 过滤危险html代码
2009/06/29 PHP
php 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
php header Content-Type类型小结
2011/07/03 PHP
PHPExcel读取EXCEL中的图片并保存到本地的方法
2015/02/14 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
在IE浏览器中resize事件执行多次的解决方法
2011/07/12 Javascript
node.js Web应用框架Express入门指南
2014/05/28 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
2015/03/26 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
jQuery实现美观的多级动画效果菜单代码
2015/09/06 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
2019/03/04 Javascript
Angular CLI 使用教程指南参考小结
2019/04/10 Javascript
js实现掷骰子小游戏
2019/10/24 Javascript
js实现课堂随机点名系统
2019/11/21 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
Javascript异步流程控制之串行执行详解
2020/09/27 Javascript
python利用thrift服务读取hbase数据的方法
2018/12/27 Python
python在新的图片窗口显示图片(图像)的方法
2019/07/11 Python
Python re 模块findall() 函数返回值展现方式解析
2019/08/09 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
Python基于class()实现面向对象原理详解
2020/03/26 Python
Jupyter Notebook的连接密码 token查询方式
2020/04/21 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
工程管理造价应届生求职信
2013/11/13 职场文书
生产内勤岗位职责
2013/12/07 职场文书
出纳员岗位责任制
2014/02/11 职场文书
捐书倡议书
2014/08/29 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
党支部2014年度工作总结
2014/12/04 职场文书
青年文明号申报材料
2014/12/23 职场文书
机关单位保密工作责任书
2015/05/11 职场文书
Vue详细的入门笔记
2021/05/10 Vue.js
Python 居然可以在 Excel 中画画你知道吗
2022/02/15 Python
CSS使用Flex和Grid布局实现3D骰子
2022/08/05 HTML / CSS