dojo中的下拉框

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>

dojo中的下拉框

相关文章