1、设计思路
（1）利用dojo设计三种不同的下拉框，Select、ComboBox和FilteringSelect；
（2）再取下拉框中的option中的value和描述。
2、设计步骤
（1）dijit/form/Select
<label for="city" style='color:#FF0000;'>地市：</label>
<select id="city" data-dojo-type="dijit/form/Select" data-dojo-props='style:"width:250px;"'>
<option value="0">全部</option>
<option value="1">武汉市</option>
<option value="2">黄石市</option>
<option value="3">十堰市</option>
<option value="4">荆州市</option>
<option value="5">宜昌市</option>
<option value="6">襄阳市</option>
<option value="7">鄂州市</option>
<option value="8">荆门市</option>
<option value="9">黄冈市</option>
<option value="10">咸宁市</option>
<option value="11">随州市</option>
<option value="12">孝感市</option>
</select>
显示option中的值和描述
（2）dijit/form/ComboBox
<label for="cityCom" style='color:#00FF00;'>地市：</label> <select id="cityCom" data-dojo-type="dijit/form/ComboBox" data-dojo-props='style:"width:250px;"'> <option value="0">全部</option> <option value="1">武汉市</option> <option value="2">黄石市</option> <option value="3">十堰市</option> <option value="4">荆州市</option> <option value="5">宜昌市</option> <option value="6">襄阳市</option> <option value="7">鄂州市</option> <option value="8">荆门市</option> <option value="9">黄冈市</option> <option value="10">咸宁市</option> <option value="11">随州市</option> <option value="12">孝感市</option> </select>显示option中的值和描述
（3）dijit/form/FilteringSelect
<label for="cityFil" style='color:#0000FF;'>地市：</label>
<select id="cityFil" data-dojo-type="dijit/form/FilteringSelect" data-dojo-props='style:"width:250px;"'>
<option value="0">全部</option>
<option value="1">武汉市</option>
<option value="2">黄石市</option>
<option value="3">十堰市</option>
<option value="4">荆州市</option>
<option value="5">宜昌市</option>
<option value="6">襄阳市</option>
<option value="7">鄂州市</option>
<option value="8">荆门市</option>
<option value="9">黄冈市</option>
<option value="10">咸宁市</option>
<option value="11">随州市</option>
<option value="12">孝感市</option>
</select>
显示option中的值和描述
3、设计讲解
dijit.byId('city').get('value')：获取option中的value值
dijit.byId('city').get('displayedValue')：获取option中的描述值
4、附录
源码：
<!DOCTYPE html>
<!--
To change this license header,choose License Headers in Project Properties.
To change this template file,choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>FilteringSelect</title>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="../script/dojoroot/dijit/themes/claro/claro.css"/>
<script type="text/javascript" src="../script/dojoroot/dojo/dojo.js" data-dojo-config="isDebug: true,parSEOnLoad: true"></script>
<style type="text/css">
body{
width:100%;
height:100%;
font-size:12px;
}
#tab{
width:40%;
height:60px;
font-weight:bold;
}
</style>
<script type="text/javascript">
dojo.require("dijit.form.DateTextBox");
</script>
</head>
<body class="claro" role="main">
<table id="tab">
<tr>
<td>
<label for="city" style='color:#FF0000;'>地市：</label>
<select id="city" data-dojo-type="dijit/form/Select" data-dojo-props='style:"width:250px;"'>
<option value="0">全部</option>
<option value="1">武汉市</option>
<option value="2">黄石市</option>
<option value="3">十堰市</option>
<option value="4">荆州市</option>
<option value="5">宜昌市</option>
<option value="6">襄阳市</option>
<option value="7">鄂州市</option>
<option value="8">荆门市</option>
<option value="9">黄冈市</option>
<option value="10">咸宁市</option>
<option value="11">随州市</option>
<option value="12">孝感市</option>
</select>
</td>
<td>
<button type="button" data-dojo-type="dijit/form/Button" data-dojo-props='style:"width:100px;"'>查询
<script type="dojo/on" data-dojo-event="click">
//获取option中的value值
var city = dijit.byId('city').get('value');
//获取option中的value值的描述
var cityValue = dijit.byId('city').get('displayedValue');
//打印option中的value值
alert(city);
//打印option中的value值的描述
alert(cityValue);
</script>
</button>
</td>
</tr>
<tr>
<td>
<label for="cityCom" style='color:#00FF00;'>地市：</label>
<select id="cityCom" data-dojo-type="dijit/form/ComboBox" data-dojo-props='style:"width:250px;"'>
<option value="0">全部</option>
<option value="1">武汉市</option>
<option value="2">黄石市</option>
<option value="3">十堰市</option>
<option value="4">荆州市</option>
<option value="5">宜昌市</option>
<option value="6">襄阳市</option>
<option value="7">鄂州市</option>
<option value="8">荆门市</option>
<option value="9">黄冈市</option>
<option value="10">咸宁市</option>
<option value="11">随州市</option>
<option value="12">孝感市</option>
</select>
</td>
<td>
<button type="button" data-dojo-type="dijit/form/Button" data-dojo-props='style:"width:100px;"'>查询
<script type="dojo/on" data-dojo-event="click">
//获取option中的value值
var cityC = dijit.byId('cityCom').get('value');
//获取option中的value值的描述
var cityValueC = dijit.byId('cityCom').get('displayedValue');
//打印option中的value值
alert(cityC);
//打印option中的value值的描述
alert(cityValueC);
</script>
</button>
</td>
</tr>
<tr>
<td>
<label for="cityFil" style='color:#0000FF;'>地市：</label>
<select id="cityFil" data-dojo-type="dijit/form/FilteringSelect" data-dojo-props='style:"width:250px;"'>
<option value="0">全部</option>
<option value="1">武汉市</option>
<option value="2">黄石市</option>
<option value="3">十堰市</option>
<option value="4">荆州市</option>
<option value="5">宜昌市</option>
<option value="6">襄阳市</option>
<option value="7">鄂州市</option>
<option value="8">荆门市</option>
<option value="9">黄冈市</option>
<option value="10">咸宁市</option>
<option value="11">随州市</option>
<option value="12">孝感市</option>
</select>
</td>
<td>
<button type="button" data-dojo-type="dijit/form/Button" data-dojo-props='style:"width:100px;"'>查询
<script type="dojo/on" data-dojo-event="click">
//获取option中的value值
var cityF = dijit.byId('cityFil').get('value');
//获取option中的value值的描述
var cityValueF = dijit.byId('cityFil').get('displayedValue');
//打印option中的value值
alert(cityF);
//打印option中的value值的描述
alert(cityValueF);
</script>
</button>
</td>
</tr>
</table>
</body>
</html>
原文链接：https://www.f2er.com/dojo/291294.html