Dojo获取下拉框的文本和值实例代码

 更新时间:2016年05月27日 11:21:07   作者:翱翔天地  
这篇文章主要介绍了Dojo获取下拉框的文本和值实例代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下

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”按钮

相关文章

  • 微信小程序实战之轮播图(3)

    微信小程序实战之轮播图(3)

    这篇文章主要为大家详细介绍了微信小程序实战之轮播图效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • Underscore.js 的模板功能介绍与应用

    Underscore.js 的模板功能介绍与应用

    Underscore是一个非常实用的JavaScript库,提供许多编程时需要的功能的支持,他在不扩展任何JavaScript的原生对象的情况下提供很多实用的功能,需要了解的朋友可以详细参考下
    2012-12-12
  • 微信小程序实现计时器

    微信小程序实现计时器

    这篇文章主要为大家详细介绍了微信小程序实现计时器,小程序点击事件触发计时器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-09-09
  • 低代码从0到1创建小程序项目详解流程

    低代码从0到1创建小程序项目详解流程

    低代码作为开发工具类的产品,需要有从0到1体系化的教程才可以,而且还得有教师进行辅助。否则,学习低代码是有难度的,入门很难。因为大家习惯了用代码编程,一下子过度到可视化编程,有一个思路上的转变
    2022-08-08
  • 原生JS实现图片懒加载(lazyload)实例

    原生JS实现图片懒加载(lazyload)实例

    图片懒加载也是比较常见的一种性能优化的方法,本篇文章主要介绍了原生JS实现图片懒加载(lazyload)实例,这里整理了详细的代码,有需要的小伙伴可以参考下
    2017-06-06
  • JavaScript控制图片360度旋转代码

    JavaScript控制图片360度旋转代码

    JavaScript控制一张图片旋转,每次旋转90度,可旋转一周360度,以前没见到过,也不知道有没有用,奉献给大家,希望喜欢
    2011-12-12
  • 微信小程序使用navigator实现页面跳转功能

    微信小程序使用navigator实现页面跳转功能

    本周学习了navigtor到导航组件,目前我想使用navigtor组件实现跳转以及返回功能,下面这篇文章主要给大家介绍了关于微信小程序使用navigator实现页面跳转功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • JavaScript中跨域调用Flash的方法

    JavaScript中跨域调用Flash的方法

    这篇文章主要介绍了JavaScript中跨域调用Flash的方法,只需要在Flash中加一句话即可,需要的朋友可以参考下
    2014-08-08
  • 基于JS实现一个可拖拽的容器布局组件

    基于JS实现一个可拖拽的容器布局组件

    这篇文章主要为大家详细介绍了如何基于JavaScript实现一个可拖拽的容器布局组件,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-12-12

最新评论