用Dojo Select的option属性实现下拉框联动

2024-02-24 17:32

本文主要是介绍用Dojo Select的option属性实现下拉框联动,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

源代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>Demo: Dijit Select using options</title><link rel="stylesheet" href="css/demo.css" media="screen"><link rel="stylesheet" href="dijit/themes/claro/claro.css" media="screen">
</head>
<body class="claro">
<div style="width:540px;"><h1 style="text-align: center;">Programmatic Example</h1><div style="width:33%;float: left;"><h1>Select</h1><label for="stateSelect1">State:</label><div id="stateSelect1"></div></div><div style="width:33%;float: right;"><h1>Values:</h1><div><strong>value:</strong> <span id="value"></span></div><div><strong>displayedValue:</strong> <span id="displayedValue"></span></div><h5>*Note how the submitted value will be the internal option value</h5></div><div style="width:33%;float: right;"><h1>Select2</h1><label for="stateSelect2">State:</label><div id="stateSelect2"></div></div></div><!-- load dojo and provide config via data attribute -->
<script src="dojo/dojo.js" data-dojo-config="isDebug: true, async: true"></script>
<script>require(["dijit/form/Select", "dojo/store/Memory", "dojo/domReady!"],function(Select, Memory){var op1=[{value: "",label: "Select a state",selected: true},{value: "AL",label: "Alabama"},{value: "AK",label: "Alaska"},{value: "AZ",label: "Arizona"},{value: "AR",label: "Arkansas"},// ... more states would go here ...{value: "DC",label: "Washington, D.C.",disabled: false // can't pick this; it's not a state!},{value: "WY",label: "Wyoming"}];var opal=[{value: "BA",label: "BasketAnal"},{value: "BB",label: "BulletBlack"},{value: "BC",label: "BulletCheap"}];	var opdc=[{value: "DC",label: "DuckCome"},{value: "DD",label: "DadDead"},{value: "DF",label: "DeepThoroat"}];var select1 = new Select({name: "stateSelect",options: op1,onChange: function(value){document.getElementById("value").innerHTML = value;document.getElementById("displayedValue").innerHTML = this.get("displayedValue");switch(value){case "AL"://	alert("AL");select2.set("options",opdc);select2.startup();break;case "DC": alert("DC");break;default:alert("Default");}}}, "stateSelect1");select1.startup();var select2 = new Select({name: "stateSelect",options: opal,onChange: function(value){document.getElementById("value").innerHTML = value;document.getElementById("displayedValue").innerHTML = this.get("displayedValue");switch(value){}}}, "stateSelect2");select2.startup();});</script>
</body>
</html>

这篇关于用Dojo Select的option属性实现下拉框联动的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/742826

相关文章

Python实现终端清屏的几种方式详解

《Python实现终端清屏的几种方式详解》在使用Python进行终端交互式编程时,我们经常需要清空当前终端屏幕的内容,本文为大家整理了几种常见的实现方法,有需要的小伙伴可以参考下... 目录方法一:使用 `os` 模块调用系统命令方法二:使用 `subprocess` 模块执行命令方法三:打印多个换行符模拟

SpringBoot+EasyPOI轻松实现Excel和Word导出PDF

《SpringBoot+EasyPOI轻松实现Excel和Word导出PDF》在企业级开发中,将Excel和Word文档导出为PDF是常见需求,本文将结合​​EasyPOI和​​Aspose系列工具实... 目录一、环境准备与依赖配置1.1 方案选型1.2 依赖配置(商业库方案)二、Excel 导出 PDF

Python实现MQTT通信的示例代码

《Python实现MQTT通信的示例代码》本文主要介绍了Python实现MQTT通信的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录1. 安装paho-mqtt库‌2. 搭建MQTT代理服务器(Broker)‌‌3. pytho

spring中的@MapperScan注解属性解析

《spring中的@MapperScan注解属性解析》@MapperScan是Spring集成MyBatis时自动扫描Mapper接口的注解,简化配置并支持多数据源,通过属性控制扫描路径和过滤条件,利... 目录一、核心功能与作用二、注解属性解析三、底层实现原理四、使用场景与最佳实践五、注意事项与常见问题六

使用zip4j实现Java中的ZIP文件加密压缩的操作方法

《使用zip4j实现Java中的ZIP文件加密压缩的操作方法》本文介绍如何通过Maven集成zip4j1.3.2库创建带密码保护的ZIP文件,涵盖依赖配置、代码示例及加密原理,确保数据安全性,感兴趣的... 目录1. zip4j库介绍和版本1.1 zip4j库概述1.2 zip4j的版本演变1.3 zip4

python生成随机唯一id的几种实现方法

《python生成随机唯一id的几种实现方法》在Python中生成随机唯一ID有多种方法,根据不同的需求场景可以选择最适合的方案,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习... 目录方法 1:使用 UUID 模块(推荐)方法 2:使用 Secrets 模块(安全敏感场景)方法

Spring StateMachine实现状态机使用示例详解

《SpringStateMachine实现状态机使用示例详解》本文介绍SpringStateMachine实现状态机的步骤,包括依赖导入、枚举定义、状态转移规则配置、上下文管理及服务调用示例,重点解... 目录什么是状态机使用示例什么是状态机状态机是计算机科学中的​​核心建模工具​​,用于描述对象在其生命

Spring Boot 结合 WxJava 实现文章上传微信公众号草稿箱与群发

《SpringBoot结合WxJava实现文章上传微信公众号草稿箱与群发》本文将详细介绍如何使用SpringBoot框架结合WxJava开发工具包,实现文章上传到微信公众号草稿箱以及群发功能,... 目录一、项目环境准备1.1 开发环境1.2 微信公众号准备二、Spring Boot 项目搭建2.1 创建

IntelliJ IDEA2025创建SpringBoot项目的实现步骤

《IntelliJIDEA2025创建SpringBoot项目的实现步骤》本文主要介绍了IntelliJIDEA2025创建SpringBoot项目的实现步骤,文中通过示例代码介绍的非常详细,对大家... 目录一、创建 Spring Boot 项目1. 新建项目2. 基础配置3. 选择依赖4. 生成项目5.

Linux线程之线程的创建、属性、回收、退出、取消方式

《Linux线程之线程的创建、属性、回收、退出、取消方式》文章总结了线程管理核心知识:线程号唯一、创建方式、属性设置(如分离状态与栈大小)、回收机制(join/detach)、退出方法(返回/pthr... 目录1. 线程号2. 线程的创建3. 线程属性4. 线程的回收5. 线程的退出6. 线程的取消7.