dojo中的下拉框

来源：互联网发布：pc网络格斗游戏排行榜编辑：程序博客网时间：2024/05/19 03:21

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 | Templatesand 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>

2 0