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 操作XML入门
Dec 25 Javascript
fckeditor 获取文本框值的实现代码
Feb 09 Javascript
JavaScript 学习笔记(五)
Dec 31 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
Dec 12 Javascript
js出生日期 年月日级联菜单示例代码
Jan 10 Javascript
JavaScript避免内存泄露及内存管理技巧
Sep 05 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
Aug 11 Javascript
原生js编写焦点图效果
Dec 08 Javascript
Ajax验证用户名或昵称是否已被注册
Apr 05 Javascript
react-native使用react-navigation进行页面跳转导航的示例
Sep 07 Javascript
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
JavaScript实现优先级队列
Dec 06 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
DOMXML函数笔记
2006/10/09 PHP
php 检查电子邮件函数(自写)
2014/01/16 PHP
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
jquery isEmptyObject判断是否为空对象的函数
2011/02/14 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
Js nodeType 属性全面解析
2013/11/14 Javascript
js对象转json数组的简单实现案例
2014/02/28 Javascript
js鼠标点击图片切换效果代码分享
2015/08/26 Javascript
使用 stylelint检查CSS_StyleLint
2016/04/28 Javascript
jquery实现拖动效果
2016/08/10 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
2016/12/15 Javascript
Vue实现typeahead组件功能(非常靠谱)
2017/08/26 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
React中嵌套组件与被嵌套组件的通信过程
2018/07/11 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
Vue3.0的优化总结
2020/10/16 Javascript
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
python和pygame实现简单俄罗斯方块游戏
2021/02/19 Python
详解Python进阶之切片的误区与高级用法
2018/12/24 Python
python获取交互式ssh shell的方法
2019/02/14 Python
梅尔倒谱系数(MFCC)实现
2019/06/19 Python
Python使用re模块验证危险字符
2020/05/21 Python
python 中的9个实用技巧,助你提高开发效率
2020/08/30 Python
Django创建一个后台的基本步骤记录
2020/10/02 Python
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
2020/11/10 HTML / CSS
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
优秀的毕业生的自我评价
2013/12/12 职场文书
客户服务经理岗位职责
2014/01/29 职场文书
园林技术个人的自我评价
2014/02/15 职场文书
英语一分钟演讲稿
2014/04/29 职场文书
专题组织生活会方案
2014/06/15 职场文书
公务员学习习总书记“三严三实”思想汇报
2014/09/19 职场文书
幼儿园万圣节活动总结
2015/05/05 职场文书
关于使用Redisson订阅数问题
2022/01/18 Redis