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向.ashx文件post中文乱码问题的解决方法
Mar 28 Javascript
JQuery.get提交页面不跳转的解决方法
Jan 13 Javascript
JavaScript获取页面中第一个锚定文本的方法
Apr 03 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
Mar 10 Javascript
jquery按回车键实现表单提交的简单实例
May 25 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
Aug 11 Javascript
巧用canvas
Jan 21 Javascript
vue图片加载与显示默认图片实例代码
Mar 16 Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
Dec 19 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
Feb 05 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 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
sourcesafe管理phpproj文件的补充说明(downmoon)
2009/04/11 PHP
基于php-fpm 参数的深入理解
2013/06/03 PHP
PHP连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
php集成动态口令认证
2016/07/21 PHP
PHP计算近1年的所有月份
2017/03/13 PHP
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
javascript学习笔记(二) js一些基本概念
2012/06/18 Javascript
给事件响应函数传参数的四种方式小结
2013/12/05 Javascript
Javascript中this关键字的一些小知识
2015/03/15 Javascript
浅谈JavaScript正则表达式分组匹配
2015/04/10 Javascript
浅谈jQuery构造函数分析
2015/05/11 Javascript
jquery实现的判断倒计时是否结束代码
2016/02/05 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
jQuery实现简单的tab标签页效果
2016/09/12 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
利用types增强vscode中js代码提示功能详解
2017/07/07 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
2017/07/07 Javascript
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
Vue实现动态创建和删除数据的方法
2018/03/17 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
2020/09/11 Javascript
python3 打开外部程序及关闭的示例
2018/11/06 Python
python中正则表达式与模式匹配
2019/05/07 Python
python跳出双层for循环的解决方法
2019/06/24 Python
Python定时任务APScheduler安装及使用解析
2020/08/07 Python
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
屈臣氏官方旗舰店:亚洲享负盛名的保健及美妆零售商
2019/03/15 全球购物
简述数据库的设计过程
2015/06/22 面试题
2014年中班元旦活动方案
2014/02/14 职场文书
师德师风建设方案
2014/05/08 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
检举信的写法
2019/04/10 职场文书
写作指导:怎么书写竞聘演讲稿?
2019/07/04 职场文书
纪念建国70周年演讲稿
2019/07/19 职场文书
教你怎么用Python监控愉客行车程
2021/04/29 Python
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android
python文件与路径操作神器 pathlib
2022/04/01 Python