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 相关文章推荐
Javascript浅谈之this
Dec 17 Javascript
$.each与$().each的区别示例介绍
Mar 20 Javascript
JavaScript DOM节点添加示例
Jul 16 Javascript
用jquery修复在iframe下的页面锚点失效问题
Aug 22 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
Dec 19 Javascript
jQuery.position()方法获取不到值的安全替换方法
Mar 13 Javascript
ajax如何实现页面局部跳转与结果返回
Aug 24 Javascript
基于ajax和jsonp的原生封装(实例)
Oct 16 Javascript
详解vue-meta如何让你更优雅的管理头部标签
Jan 18 Javascript
layui实现给某一列加点击事件
Oct 26 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
Jul 22 Javascript
vue中的.$mount('#app')手动挂载操作
Sep 02 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
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
ThinkPHP中的create方法与自动令牌验证实例教程
2014/08/22 PHP
php实现带读写分离功能的MySQL类完整实例
2016/07/28 PHP
php 输入输出流详解及示例代码
2016/08/25 PHP
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
jquery插件unobtrusive实现片段式加载
2015/06/15 Javascript
详解JS面向对象编程
2016/01/24 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
js变量提升深入理解
2016/09/16 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
2017/11/22 Javascript
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
2017/12/22 Javascript
js正则相关知识点专题
2018/05/10 Javascript
微信小程序模拟cookie的实现
2018/06/20 Javascript
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
vue2 v-model/v-text 中使用过滤器的方法示例
2019/05/09 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
2019/11/29 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
Python Sleep休眠函数使用简单实例
2015/02/02 Python
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
python内置函数:lambda、map、filter简单介绍
2017/11/16 Python
python使用jieba实现中文分词去停用词方法示例
2018/03/11 Python
Python生成器generator用法示例
2018/08/10 Python
使用Python轻松完成垃圾分类(基于图像识别)
2019/07/09 Python
Django框架视图介绍与使用详解
2019/07/18 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
html5 视频播放解决方案
2016/11/06 HTML / CSS
介绍一些UNIX常用简单命令
2014/11/11 面试题
出纳工作岗位责任制
2014/02/02 职场文书
技校毕业生自荐信范文
2014/03/07 职场文书
党委书记个人检查对照材料思想汇报
2014/10/11 职场文书
个人先进事迹材料
2014/12/29 职场文书
应届毕业生求职简历自我评价
2015/03/02 职场文书
一文搞懂Java中的注解和反射
2022/06/21 Java/Android