1、设计思路 (1)利用dojo设计三种不同的下拉框,Select、ComboBox和FilteringSelect; (2)再取下拉框中的option中的value和描述。 2、设计步骤 (1)dijit/form/Select label for="city" style='color:#FF0
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>