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动态创建DOM、表单元素的实现代码
Aug 09 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
Sep 29 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
Jan 17 Javascript
DIV始终居中的js代码
Feb 17 Javascript
JavaScript代码编写中各种各样的坑和填坑方法
Jun 06 Javascript
浅谈 javascript 事件处理
Jan 04 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
Mar 17 Javascript
浅析AngularJs HTTP响应拦截器
Dec 28 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
Sep 25 Javascript
vue监听键盘事件的相关总结
Jan 29 Vue.js
jquery实现广告上下滚动效果
Mar 04 jQuery
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
将兴奋、喜悦和坎加斯带到戴安娜:亚马逊公主
2020/03/03 欧美动漫
PHP 多维数组排序实现代码
2009/08/05 PHP
PHP 提取图片img标记中的任意属性的简单实例
2013/12/10 PHP
php检查是否是ajax请求的方法
2015/04/16 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
JavaScript入门教程 Cookies
2009/01/31 Javascript
JQuery 引发两次$(document.ready)事件
2010/01/15 Javascript
Asp.Net alert弹出提示信息的几种方法总结
2014/01/29 Javascript
JavaScript利用正则表达式去除日期中的“-”
2014/07/01 Javascript
jquery中ajax处理跨域的三大方式
2016/01/05 Javascript
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
2016/09/26 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
2017/04/10 jQuery
JS获取短信验证码倒计时的实现代码
2017/05/22 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
python获取本机mac地址和ip地址的方法
2015/04/29 Python
python保存二维数组到txt文件中的方法
2018/11/15 Python
python  文件的基本操作 菜中菜功能的实例代码
2019/07/17 Python
基于python进行抽样分布描述及实践详解
2019/09/02 Python
英国浴室洗脸盆购物网站:Click Basin
2018/06/08 全球购物
中药专业大学生医药工作求职信
2013/10/25 职场文书
运动会入场词200字
2014/02/15 职场文书
工业设计毕业生自荐信
2014/04/13 职场文书
个人作风建设心得体会
2014/10/22 职场文书
质量整改报告范文
2014/11/08 职场文书
社区党员干部承诺书
2015/05/04 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
丧事答谢词大全
2015/09/30 职场文书
简历中的自我评价怎么写呢?
2019/04/30 职场文书
浅谈Python实现opencv之图片色素的数值运算和逻辑运算
2021/06/23 Python
WCG2010 星际争霸决赛 Flash vs Goojila 1 星际经典比赛回顾
2022/04/01 星际争霸