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 相关文章推荐
js 上传图片预览问题
Dec 06 Javascript
js网页侧边随页面滚动广告效果实现
Apr 14 Javascript
JS动态获取当前时间,并写到特定的区域
May 03 Javascript
在javascript中实现函数数组的方法
Dec 25 Javascript
jquery基础教程之deferred对象使用方法
Jan 22 Javascript
javascript实现全角半角检测的方法
Jul 23 Javascript
仿iframe效果Aajx文件上传实例
Nov 18 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
May 03 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
Aug 20 Javascript
4个顶级开源JavaScript图表库
Sep 29 Javascript
详谈js的变量提升以及使用方法
Oct 06 Javascript
js属性对象的hasOwnProperty方法的使用
Feb 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
在命令行下运行PHP脚本[带参数]的方法
2010/01/22 PHP
供参考的 php 学习提高路线分享
2011/10/23 PHP
php实现获取文件mime类型的方法
2015/02/11 PHP
php简单防盗链实现方法
2015/07/29 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
cookie中的path与domain属性详解
2013/12/18 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
jQuery实现仿百度帖吧头部固定导航效果
2015/08/07 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
2015/11/13 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
2017/04/25 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
Angularjs单选框相关的示例代码
2017/08/17 Javascript
vue+node实现图片上传及预览的示例方法
2018/11/22 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
2019/04/29 Javascript
layui的表单提交以及验证和修改弹框的实例
2019/09/09 Javascript
[02:35]DOTA2英雄基础教程 狙击手
2014/01/14 DOTA
python getopt 参数处理小示例
2009/06/09 Python
python获取url的返回信息方法
2018/12/17 Python
Python开启线程,在函数中开线程的实例
2019/02/22 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
python使用celery实现异步任务执行的例子
2019/08/28 Python
Jupyter notebook如何修改平台字体
2020/05/13 Python
Python的3种运行方式:命令行窗口、Python解释器、IDLE的实现
2020/10/10 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
荟萃全球保健品:维他购
2018/05/09 全球购物
声明struct x1 { . . . }; 和typedef struct { . . . }x2;有什么不同
2012/06/02 面试题
城市轨道专业个人求职信范文
2013/09/23 职场文书
七一表彰活动方案
2014/01/18 职场文书
怎样写离婚协议书
2014/09/10 职场文书
2014年项目工作总结
2014/11/24 职场文书
2015年幼儿园保育员工作总结
2015/04/23 职场文书
小学教师师德师风承诺书
2015/04/28 职场文书
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python
以下牛机,你有几个
2022/04/05 无线电