Dojo获取下拉框的文本和值实例代码


Posted in Javascript onMay 27, 2016

Dojo

Dojo是一个用javascript语言实现的开源DHTML工具包。它是在几个项目捐助基础上建立起来的(nWidgets,Burstlib,f(m)),这也是为什么叫它a"unified"toolkit的原因。Dojo的目标是解决开发DHTML应用程序遇到的那些,长期存在、历史问题(historical problems with DHTML)。跨浏览器问题。

1、问题背景

这里有一个下拉框,其中选项为一年四季,选中后打印下拉框的值和文本

2、实现源码

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>dojo-获取下拉框的值和文本</title> 
<link rel="stylesheet" href="js/dojo/dijit/themes/claro/claro.css" /> 
<script type="text/javascript" src="js/jquery-1.12.4.js"></script> 
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script> 
<style> 
#season{ 
width:200px; 
} 
</style> 
<script> 
dojoConfig={async:true,parseOnLoad:true} 
</script> 
<script> 
require([ 
"dojo/store/Memory", "dijit/form/FilteringSelect", "dojo/domReady!" 
], function(Memory, FilteringSelect){ 
var seasonStore = new Memory({ 
data: [ 
{name:"春季", id:"spring"}, 
{name:"夏季", id:"summer"}, 
{name:"秋季", id:"autumn"}, 
{name:"冬季", id:"winter"} 
] 
}); 
var seasonSelect = new FilteringSelect({ 
id: "season", 
name: "season", 
value: "spring", 
store: seasonStore, 
searchAttr: "name" 
}, "season").startup(); 
}); 
</script> 
</head> 
<body class="claro"> 
<input id="season" /><br> 
<button id="valueBtn" onclick="alert(dijit.byId('season').get('value'))">获取下拉框value</button> 
<button id="textBtn" onclick="alert(dijit.byId('season').get('displayedValue'))">获取下拉框text</button> 
</body> 
</html>

3、实现结果

(1)初始化时

(2)点击“获取下拉框value”按钮

(3)点击“获取下拉框text”按钮

Javascript 相关文章推荐
jQuery select控制插件
Aug 17 Javascript
JavaScript 实现类的多种方法实例
May 01 Javascript
js的匿名函数使用介绍
Dec 11 Javascript
jQuery实现简单下拉导航效果
Sep 07 Javascript
javascript加载xml 并解析各节点的值(实现方法)
Oct 12 Javascript
js数字计算 误差问题的快速解决方法
Feb 28 Javascript
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
详解Vue学习笔记进阶篇之列表过渡及其他
Jul 17 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
Sep 01 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
Vue 实现把表单form数据 转化成json格式的数据
Oct 29 Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
May 27 #Javascript
js基于cookie方式记住返回页面用法示例
May 27 #Javascript
js获取客户端操作系统类型的方法【测试可用】
May 27 #Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 #Javascript
JS集成fckeditor及判断内容是否为空的方法
May 27 #Javascript
js实现div模拟模态对话框展现URL内容
May 27 #Javascript
详解jQuery中的deferred对象的使用(一)
May 27 #Javascript
You might like
php分页示例代码
2007/03/19 PHP
libmysql.dll与php.ini是否真的要拷贝到c:\windows目录下呢
2010/03/15 PHP
php Ubb代码编辑器函数代码
2012/07/05 PHP
PHP连接SQL server数据库测试脚本运行实例
2020/08/24 PHP
在IE下获取object(ActiveX)的Param的代码
2009/09/15 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
2012/05/03 Javascript
javascript阻止scroll事件多次执行的思路及实现
2013/11/08 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
jQuery+easyui中的combobox实现下拉框特效
2015/02/27 Javascript
jQuery实现带水平滑杆的焦点图动画插件
2016/03/08 Javascript
微信小程序 实战实例开发流程详细介绍
2017/01/05 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
Moment.js实现多个同时倒计时
2019/08/26 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
[01:11:37]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第一场 11.19
2020/11/19 DOTA
Python 统计字数的思路详解
2018/05/08 Python
Django之模型层多表操作的实现
2019/01/08 Python
numpy基础教程之np.linalg
2019/02/12 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
娇韵诗俄罗斯官方网站:Clarins俄罗斯
2020/10/03 全球购物
国际会议邀请函范文
2014/01/16 职场文书
财务主管自我鉴定
2014/01/17 职场文书
餐饮收银员岗位职责
2014/02/07 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
小学生推普周国旗下讲话稿
2014/09/21 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android
Python列表的索引与切片
2022/04/07 Python
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs