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 相关文章推荐
2007/12/23更新创意无限,简单实用(javascript log)
Dec 24 Javascript
javascript 单选框,多选框美化代码
Aug 01 Javascript
控制input输入框中提示信息的显示和隐藏的方法
Feb 12 Javascript
JavaScript 学习笔记之数据类型
Jan 14 Javascript
javascript实现动态加载CSS
Jan 26 Javascript
JS实现定时自动关闭DIV层提示框的方法
May 11 Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
JavaScript实现删除数组重复元素的5种常用高效算法总结
Jan 18 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 Javascript
React路由管理之React Router总结
May 10 Javascript
js中的深浅拷贝问题简析
May 10 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
jQuery+php实现ajax文件即时上传的详解
2013/06/17 PHP
深入解析PHP中foreach语句控制数组循环的用法
2015/11/30 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
JavaScript 创建对象
2009/07/17 Javascript
来自国外的30个基于jquery的Web下拉菜单
2012/06/22 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
2013/11/25 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
2014/06/11 Javascript
javascript学习笔记(四)function函数部分
2014/09/30 Javascript
javascript获取flash版本号的方法
2014/11/20 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
2015/11/04 Javascript
js和jquery分别验证单选框、复选框、下拉框
2015/12/17 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
常用的js验证和数据处理总结
2016/08/02 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
2017/05/13 jQuery
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
jQuery轮播图功能制作方法详解
2019/12/03 jQuery
你可能从未使用过的11+个JavaScript特性(小结)
2020/01/08 Javascript
js实现html滑动图片拼图验证
2020/06/24 Javascript
python操作摄像头截图实现远程监控的例子
2014/03/25 Python
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
python 如何调用 dubbo 接口
2020/09/24 Python
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
Yves Rocher伊夫·黎雪美国官网:法国始创植物美肌1959
2019/01/09 全球购物
报到证丢失证明
2014/01/11 职场文书
迎国庆横幅标语
2014/10/08 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
小兵张嘎观后感
2015/06/03 职场文书
未婚证明格式
2015/06/15 职场文书
八年级语文教学反思
2016/03/03 职场文书
2016年中学清明节活动总结
2016/04/01 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书
python正则表达式re.search()的基本使用教程
2021/05/21 Python
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技