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 相关文章推荐
Javascript call和apply区别及使用方法
Nov 14 Javascript
JS随机漂浮广告代码具体实例
Nov 19 Javascript
checkbox全选所涉及到的知识点介绍
Dec 31 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
封装好的js判断操作系统与浏览器代码分享
Jan 09 Javascript
RequireJS入门一之实现第一个例子
Sep 30 Javascript
Angular 根据 service 的状态更新 directive
Apr 03 Javascript
javaScript数组迭代方法详解
Apr 14 Javascript
微信小程序 网络API Websocket详解
Nov 09 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
Jan 03 Javascript
基于JavaScript表单脚本(详解)
Oct 18 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 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
Zerg兵种介绍
2020/03/14 星际争霸
ajax+php打造进度条 readyState各状态
2010/03/20 PHP
mongo Table类文件 获取MongoCursor(游标)的实现方法分析
2013/07/01 PHP
zf框架的校验器InArray使用示例
2014/03/13 PHP
PHP图片等比例缩放生成缩略图函数分享
2014/06/10 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
在thinkphp5.0路径中实现去除index.php的方式
2019/10/16 PHP
Thinkphp 框架配置操作之配置加载与读取配置实例分析
2020/05/15 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
JS获取表格内指定单元格html内容的方法
2015/03/31 Javascript
深入理解jQuery之事件移除
2016/06/02 Javascript
老生常谈原生JS执行环境与作用域
2016/11/22 Javascript
JavaScript中localStorage对象存储方式实例分析
2017/01/12 Javascript
vue实现提示保存后退出的方法
2018/03/15 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
2018/08/20 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
2018/10/02 Javascript
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
vue随机验证码组件的封装实现
2020/02/19 Javascript
Vue select 绑定动态变量的实例讲解
2020/10/22 Javascript
python ElementTree 基本读操作示例
2009/04/09 Python
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
python基于itchat实现微信群消息同步机器人
2017/02/27 Python
python中类和实例如何绑定属性与方法示例详解
2017/08/18 Python
python 并发下载器实现方法示例
2019/11/22 Python
py-charm延长试用期限实例
2019/12/22 Python
tensorboard显示空白的解决
2020/02/15 Python
探讨HTML5移动开发的几大特性(必看)
2015/12/30 HTML / CSS
C/C++有关内存的思考题
2015/12/04 面试题
EJB发布WEB服务一般步骤
2012/10/31 面试题
大学生个人自荐信
2014/02/24 职场文书
暑期社会实践感言
2014/02/25 职场文书
团队经理竞聘书
2014/03/31 职场文书
2014最新开业庆典策划方案(5篇)
2014/09/15 职场文书
工程款申请报告
2015/05/15 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书