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中style属性
Oct 11 Javascript
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
Mar 10 Javascript
jQuery 选择器理解
Mar 16 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
Oct 29 Javascript
javascript history对象详解
Feb 09 Javascript
详解Koa中更方便简单发送响应的方式
Jul 20 Javascript
使用D3.js构建实时图形的示例代码
Aug 28 Javascript
vue项目上传Github预览的实现示例
Nov 06 Javascript
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
简单了解three.js 着色器材质
Aug 03 Javascript
微信小程序实现锚点跳转
Nov 23 Javascript
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
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读取msn上的用户信息类
2008/12/05 PHP
让你成为更出色的PHP开发者的10个技巧
2011/02/25 PHP
php获取字段名示例分享
2014/03/03 PHP
php绘图中显示不出图片的原因及解决
2014/03/05 PHP
ThinkPHP之foreach标签使用概述
2014/06/30 PHP
PHP中__FILE__、dirname与basename用法实例分析
2014/12/01 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
php中关于socket的系列函数总结
2015/05/18 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
将页面table内容与样式另存成excel文件的方法
2015/08/05 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
2017/07/24 Javascript
jQuery图片加载失败替换默认图片方法汇总
2017/11/29 jQuery
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
node.js +mongdb实现登录功能
2020/06/18 Javascript
简单介绍Python的轻便web框架Bottle
2015/04/08 Python
Python图像灰度变换及图像数组操作
2016/01/27 Python
浅谈python装饰器探究与参数的领取
2017/12/01 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
python fuzzywuzzy模块模糊字符串匹配详细用法
2019/08/29 Python
pycharm下配置pyqt5的教程(anaconda虚拟环境下+tensorflow)
2020/03/25 Python
Python无头爬虫下载文件的实现
2020/04/02 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
pandas apply使用多列计算生成新的列实现示例
2021/02/24 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
美国专营婴幼儿用品的购物网站:buybuy BABY
2017/01/01 全球购物
澳大利亚排名第一的在线酒类商店:MyBottleShop
2018/04/26 全球购物
巴黎欧莱雅法国官网:L’Oreal Paris
2019/04/30 全球购物
财务与信息服务专业推荐信
2013/11/28 职场文书
餐饮业创业计划书范文
2014/01/06 职场文书
鲜花方阵解说词
2014/02/13 职场文书
中国汉字听写大会观后感
2015/06/02 职场文书
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记