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

本文主要是介绍用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属性实现下拉框联动的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！