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编程起步(第五课)
Feb 27 Javascript
简洁短小的 JavaScript IE 浏览器判定代码
Mar 21 Javascript
js将json格式内容转换成对象的方法
Nov 01 Javascript
jquery制作图片时钟特效
Mar 30 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
Nov 26 Javascript
jQuery中判断对象是否存在的方法汇总
Feb 24 Javascript
原生JavaScript制作微博发布面板效果
Mar 11 Javascript
[js高手之路]从原型链开始图解继承到组合继承的产生详解
Aug 28 Javascript
分析JS中this引发的bug
Dec 12 Javascript
VUE基于NUXT的SSR 服务端渲染
Nov 30 Javascript
Vue使用预渲染代替SSR的方法
Jul 02 Javascript
原生JS中应该禁止出现的写法
May 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
UTF8编码内的繁简转换的PHP类
2009/07/09 PHP
Php Mssql操作简单封装支持存储过程
2009/12/11 PHP
php生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
windows7配置Nginx+php+mysql的详细教程
2016/09/04 PHP
PHP模糊查询技术实例分析【附源码下载】
2019/03/07 PHP
探索Emberjs制作一个简单的Todo应用
2012/11/07 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
2013/01/23 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
JS中把字符转成ASCII值的函数示例代码
2013/11/21 Javascript
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
2015/06/18 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
vue复合组件实现注册表单功能
2017/11/06 Javascript
vue服务端渲染操作简单入门实例分析
2019/08/28 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
2019/09/25 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
2020/05/12 Javascript
微信小程序 接入腾讯地图的两种写法
2021/01/12 Javascript
Python实现的多叉树寻找最短路径算法示例
2018/07/30 Python
python如何以表格形式打印输出的方法示例
2019/06/21 Python
K最近邻算法(KNN)---sklearn+python实现方式
2020/02/24 Python
python3 自动打印出最新版本执行的mysql2redis实例
2020/04/09 Python
Django封装交互接口代码
2020/07/12 Python
阿里云:Aliyun.com
2017/02/15 全球购物
最新大学毕业求职简历的自我评价
2013/10/18 职场文书
工作自荐信
2013/12/11 职场文书
财务总经理岗位职责
2014/02/16 职场文书
如何写自我鉴定
2014/03/19 职场文书
《大海那边》教学反思
2014/04/09 职场文书
2014年高数考试作弊检讨书
2014/12/14 职场文书
老员工辞职信范文
2015/05/12 职场文书
导游词之广东佛山(南风古灶)
2019/09/24 职场文书
话题作文之呼唤
2019/12/18 职场文书
七个Python必备的GUI库
2021/04/27 Python
Java GUI编程菜单组件实例详解
2022/04/07 Java/Android