dojo 级联下拉框

最新推荐文章于 2024-07-22 10:11:29 发布
最新推荐文章于 2024-07-22 10:11:29 发布
阅读量136 收藏
点赞数
文章标签： json javascript ViewUI
 

dojo 级联下拉框

效果图

 

-----------  country_en.json  -------------------

{identifier:"code",

items:[

{code:"AF",name:"Afghanistan"},
{code:"AL",name:"Albania"},
{code:"AO",name:"Angola"},
{code:"AR",name:"Argentina"},
{code:"AS",name:"American Samoa"},
{code:"AT",name:"Austria"},
{code:"AU",name:"Australia"}

................................

]}

-----------   city_en.json  -----------

{identifier:"abbreviation",
items:[
{abbreviation:"AAB",name:"ARRABURY QL",type:"AF"},
{abbreviation:"AAC",name:"AL-ARISH",type:"AF"},
{abbreviation:"AAE",name:"ANNABA",type:"AF"},
{abbreviation:"AAI",name:"ARRAIAS TO",type:"AL"},
{abbreviation:"AAL",name:"AALBORG",type:"AL"},
{abbreviation:"AAO",name:"ANACO",type:"AL"},
{abbreviation:"AAR",name:"AARHUS",type:"AL"},
{abbreviation:"AAV",name:"ALAH",type:"AO"},
{abbreviation:"AAX",name:"ARAXA MG",type:"AO"},

................................................
]}

 

主要页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>Dojo ComboBox Widget Test</title>
 <style>
  @import "http://www.cnblogs.com/../dojo/resources/dojo.css";
  @import "../css/dijitTests.css";
 </style>
 <script type="text/javascript" src="http://www.cnblogs.com/../dojo/dojo.js"
  djConfig="isDebug: false, parseOnLoad: true"></script>
 <script type="text/javascript" src="../_testCommon.js"></script>

 <script type="text/javascript">
  dojo.require("dojo.data.ItemFileReadStore");
  dojo.require("dijit.form.ComboBox");
  dojo.require("dojo.parser"); // scan page for widgets and instantiate them


  function setCountry(value) {
    var countrySelect= dijit.byId('countryCombo');
    var cityCombo = dijit.byId('cityCombo');
    cityData = new dojo.data.ItemFileReadStore({url: 'city_en.json'});
    cityCombo.store=cityData;
    cityCombo.query = {type: "" + countrySelect.item['code']};
    cityCombo._startSearch();
   } 

  
 </script>
</head>
<body>

 <div dojoType="dojo.data.ItemFileReadStore" jsId="countryData"
  url="country_en.json"></div>
 <select id="countryCombo"
     dojoType="dijit.form.ComboBox"
     store="countryData"
     name="countryList"
     searchAttr="name"
     onChange="setCountry"
     autoComplete="true" >
 </select>&nbsp;
 
 <select id="cityCombo"
     name="cityList"
     dojoType="dijit.form.ComboBox"
     searchAttr="name"
     autoComplete="true">
 </select>
</body>
</html>


注: 我使用的是dojo-release-1.0.2版本,

 此测试代码放在该源代码dojo-release-1.0.2\dojo-release-1.0.2\dijit\tests\form下即可,

是参照form下的test_ComboBox.html

 

weixin_34025151
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用Dojo Select的option属性实现下拉框联动
只会写HelloWorld的专栏
10-22 247
源代码如下 <!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
dojo级联步骤
牛栏山矿泉水
02-13 124
dojo级联步骤 1、数据请求回来后，检查数据格式是否满足下拉框的数据格式； 2、通过firebug进行调试，检查select下拉框子项结点是否取道； 3、查看API文档，保证改变store的方法是正确的。...
dojo实现省份地市级联---省份数据源
牛栏山矿泉水
01-25 101
province.json： { "identifier": "id", "label": "name", "items": [ { "id": "0", "name":"北京市"}, { "id": "1", &
dojo自定义下拉框
淘淘小窝
02-04 1640
一点点积累
使用dojo在freemaker中实现select的级联效果
zhousheng193的专栏
12-07 170
ff
Dojo获取下拉框的文本和值实例代码
09-02
在本文中，我们将深入探讨如何使用Dojo框架来获取下拉框（选择列表）的文本和值。Dojo是一个强大的JavaScript库，旨在简化DHTML应用的开发，特别是处理跨浏览器兼容性问题。以下是一个关于使用Dojo获取下拉框文本和...
下拉框二级级联
11-27
下拉框二级级联资源代码，javascript编写
dojo实现省份地市级联
01-25
首先，我们要了解Dojo的`dijit/form/Select`组件，这是实现级联下拉框的关键。这个组件允许我们创建具有下拉选项的可选输入框。我们需要为每个省份和地市创建一个Select实例，并通过JavaScript动态更新地市的选项。 ...
Dojo 学习要点
12-11
Dojo 是一个强大的 JavaScript 库，它为开发 Web 应用程序提供了丰富的功能，包括模块化、用户界面组件、数据管理、异步通信等。在深入学习 Dojo 之前，了解 JavaScript 的基础知识至关重要，特别是 JSON...
Dojo Store 概念详解
caisao7252的博客
09-11 172
翻译自：https://github.com/dojo/framework/blob/master/docs/en/stores/supplemental.md State 对象 在现代浏览器中，state 对象是作为 CommandRequest 的一部分传入的。对 state 对象的任何修改都将转换为相应的 operation，然后应用到 store 上。 import { createCom...
dojo的二级下拉菜单demo
07-06
二级下拉菜单DEMO，我博客分享要用
DOJO 下拉菜单(带刷新和获取隐藏值方法).js
04-20
DOJO 下拉菜单(带刷新和获取隐藏值方法).js
dojo省份地市级联之省份Dao实现类（五）
牛栏山矿泉水
02-15 66
dojo省份地市级联之省份Dao实现类 ProvinceDaoImpl.java： /** * */ package com.you.dao.impl; import java.util.ArrayList; import java.util.List; import com.you.dao.ProvinceDao; import com.you.model.Province...
dojo中的下拉框
游海东的技术专栏
01-04 5944
1、设计思路 （1）利用dojo设计三种不同的下拉框，Select、ComboBox和FilteringSelect； （2）再取下拉框中的option中的value和描述。 2、设计步骤 （1）dijit/form/Select 地市： 全部 武汉市 黄石市 十堰市 荆州市 宜昌市 襄阳市
前端的小玩意（5）——用dojo写的二级下拉菜单自动添加功能
weixin_34162695的博客
07-06 146
先上DEMO， 虽然丑，那是因为零级按钮的界面太丑了，图标也丑┑(￣Д ￣)┍ 这两个优化后会好很多，毕竟美观不是我的特长嘛 DEMO链接： http://download.csdn.net/detail/qq20004604/9568685 （83）二级下拉菜单 ①过程描述： 【1】数据来源：一个数组，具体格式为： var dataArr =...
dojo 多选下拉框
nanshan6521的博客
05-11 1964
最近在做一个多选下拉框，由于arcgis api for javascript 支持的是dojo，所以查了dojo的多选下拉框，发现效果很烂，在dojotoolkit中的效果是这样的： 在arcgis api for javascript中的效果是这样的：将dojo 中CheckdMultiSelect.js的源码打开并将return 下的baseClass注释掉就会成功了 return
【git】如何实现规范git commit -m的格式
最新发布
hzxOnlineOk的博客
07-22 135
【代码】【git】如何实现规范git commit -m的格式。
Dojo入门指南
"GETTING STARTED WITH DOJO" 会引导读者了解Dojo的基础知识，包括如何设置开发环境，引入Dojo库，以及理解Dojo的加载机制（如 dojo.require 和 dojo.provide）。 3. **模块化开发** Dojo采用了AMD（Asynchronous...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值