dojo中的下拉框

前端之家收集整理的这篇文章主要介绍了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>
原文链接:https://www.f2er.com/dojo/291294.html

猜你在找的Dojo相关文章