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

赞 (0)

相关推荐

  • 麻雀虽小五脏俱全 Dojo自定义控件应用

    现在Javascript框架.控件库有很多,jQuery.Ext.prototype.MooTools.Dojo等等,这些都是在Google上搜索"javascript+framework"列在第一页的.其中,除了MooTools,其它的都有所了解,但只在项目中用过Ext和Dojo.但一直不太喜欢Ext,性能有问题,新的版本还收费了. 另外,Ext官方提供的例子都是用JavaScript来创建和初始化控件,一个JavaScript配套一个HTML来用,这样管理起来很混乱.而且官方例子是

  • dojo学习第一天 Tab选项卡 实现

    dojo学习第一天 Tab选项卡 实现

    其实不然,用<精通Dojo>里的话来说就是"Dojo不只是一个程序库,而是一个工具包",它比其他所有的JS库的插件更全面更广阔.它包含大约40个用户界面控件.1个图形框架.cometd支持.1个打包系统,还有其他的一些东西. 从dojo官方网站 上下载最新版1.6,解压下来,它有三个文件夹分别是: 1. dojo: 是Dojo基础,你要做的其它事情都是在它的基础上,类似于jquery.js文件,但比它更丰富了一些其他功能; 2. dijit : Dojo的小部件框架及内建的

  • dojo随手记 gird组件引用

    dojo随手记 gird组件引用

    我建了一个文件里面代码是网上下的<精通dojo>的代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!-- ! Excerpted from "Mastering Dojo", ! published by The Pragmati

  • dojo 之基础篇(二)之从服务器读取数据

    本例子沿用 "dojo 之基础篇" 中的内容首先,我们在HelloWorld.html的同一级目录,新建一个文件,名为response.txt,内容为: Welcome to the Dojo Hello World Tutorial 将section 2的代码替换 为以下代码 <!-- SECTION 3 --> <script type="text/javascript"> dojo.require("dojo.io.*&quo

  • dojo 之基础篇(三)之向服务器发送数据

    向服务器发送数据有get和post两种. 首先,要将body中的html代码替换为 <button dojoType="Button" widgetId="helloButton">Hello World!</button> <br> 请输入名称: <input type="text" id="name">不输入数据,怎么提交数据呢. get我们只要将基础篇(二)中的: func

  • Dojo 学习要点

    由于要学习 ArcGIS Server JavaScript API,在此 API 中 ESRI 采用的是 JavaScript 开源框架 Dojo,于是先学习了点 Dojo 的知识,算是为以后的工作做准备吧. 其实开源 JavaScript 框架很多,比如最早的 prototype,很实用的 jQuery,Yahoo 的 Yui,超炫的 ExtJS 等,至于为什么 ESRI 采用 Dojo,我们也不必去猜测,肯定有人家的道理滴,好好学习 Dojo 才是硬道理. 学习 Dojo 之前,务必要掌握

  • dojo学习第二天 ajax异步请求之绑定列表

    dojo学习第二天 ajax异步请求之绑定列表

    用户不喜欢滚动条,于是我们做成了选项卡切换,用户不喜欢刷新页面,于是我们就要使用ajax了,前些年,几乎每个web端开发人员,都以懂得一点点ajax而自豪,但知道使用ajax是远远不够的,因为技术是为人而服务的,不能滥用技术,你总不能为了验证一个文本框textbox而去异步请求一次.我还遇到过有人,更新用户信息的时候,使用ajax更新,用户信息中的图片,又使用回发来更新,一个更新中,先ajax卡在那,然后再回发,你说这是多么2的行为?这种人还不少,我还遇到过有人用ajax更新后再location

  • JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述

    所以Javascript已经成为了web开发最最基本的要求之一了. 而在现实的敏捷开发中,我们通常会选择一个JS框架来取代繁琐的Native Javascript的编写.你会发现这样会节省很多的时间,写的代码也很清晰便捷.(当然在学生时代的是有也质疑过,用框架会对原生态的 Javascript理解不深入,其实这是多虑了的.在对框架的深入的同时,对原生的js也会理解的更透彻一些.成为一个精明的开发者,两者是相依相偎的.而最好的状态就是想Qzone前端一样,完全按照自己的需求开发出一套JS,CSS框

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

    Dojo Dojo是一个用javascript语言实现的开源DHTML工具包.它是在几个项目捐助基础上建立起来的(nWidgets,Burstlib,f(m)),这也是为什么叫它a"unified"toolkit的原因.Dojo的目标是解决开发DHTML应用程序遇到的那些,长期存在.历史问题(historical problems with DHTML).跨浏览器问题. 1.问题背景 这里有一个下拉框,其中选项为一年四季,选中后打印下拉框的值和文本 2.实现源码 <!DOCTYP

  • Js获取下拉框选定项的值和文本的实现代码

    Js获取下拉框的值和文本网上提供了2种方法:但有些人很不负责任,他们根本没考虑到浏览器之间的差异导致的错误,导致很多新手琢磨了半天找不出错误! 下面我总结下Firefox和IE下获取下拉框选定项的值和文本: 1. IE和Firefox都支持的方法:获取文本 复制代码 代码如下: var obj=document.getElementById('select_template'); var text=obj.options[obj.selectedIndex].text;//获取文本 var ob

  • 在Vue 中获取下拉框的文本及选项值操作

    方法1: <!-- element表单组件 --> <el-form :model="ruleForm" label-position="right" ref="ruleForm" // 被ref 标记的 status-icon size="small" inline :rules="rules" label-width="150px" class="demo

  • jQuery实现下拉框多选 jquery-multiselect 的实例代码

    jQuery实现下拉框多选 jquery-multiselect 的实例代码

    先给大家展示下效果图: 除了jquery,需要引用的样式和js文件: <link rel="stylesheet" type="text/css" href="../assets/jquery.multiselect.css" /> <link rel="stylesheet" type="text/css" href="../assets/style.css" /&g

  • vue实现下拉框二级联动效果的实例代码

    vue实现下拉框二级联动效果的实例代码

    1.实现效果 2.后端返回的数据格式 "list": [ { "id": "1178214681118568449", "title": "后端开发", "children": [ { "id": "1178214681139539969", "title": "Java" }, { "id&quo

  • jquery获取下拉框中的循环值

    话不多说,请看代码: <select class="test" id="projectno" name="projectno"> <option value="">&nbsp请输入您的所在小区</option> <volist name="cell" id="vo"> <option value="{$vo['id'

  • JavaScript实现获取select下拉框中第一个值的方法

    JavaScript实现获取select下拉框中第一个值的方法

    本文实例讲述了JavaScript实现获取select下拉框中第一个值的方法.分享给大家供大家参考,具体如下: 1.说明 获取select下拉框中的第一个值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

  • select获取下拉框的值 下拉框默认选中方法

    本文主要介绍select下拉框的相关方法. 1.通过id获取下拉框的value和文本值 例如: <select class="form-control" id="numbers"> <option value="1">数字1</option> <option value="2" selected>数字2</option> </select> $("

  • JS获取下拉框显示值和判断单选按钮的方法

    本文实例讲述了JS获取下拉框显示值和判断单选按钮的方法.分享给大家供大家参考.具体如下: 1.本人做过很多项目,都需要得到select组件显示的值.下面是我经常用到的方法: Html源码如下: <html><body> <select id="province" name="province" > <option value="1">北京</option> <option valu

  • angularjs 动态从后台获取下拉框的值方法

    angularjs 动态从后台获取下拉框的值,只要是使用repeat指令,后台提供的是一个list的对象,里面包含value和显示的值,如下: js文件: //职务等级和档次/军衔等级和档次,需要从后台获取:poslist,type:2/3/4/5 $scope.getDyActivityInforItems=function(){ serviceData.getData('inforinput/getAllSelectValueByType','POST',{ type:2 }).then(f

随机推荐