dojo:如何显示ListBox风格的选择框

常见的选择框控件:Selelct、FilteringSelect和ComboBox都是下拉框风格,而不是ListBox风格。

 

dojo还提供了一个dijit.form.MultiSelect控件可以解决问题并支持多选:http://dojotoolkit.org/reference-guide/1.10/dijit/form/MultiSelect.html

 

需要注意的是该空间不支持store这些,需要动态在JS代码中条件<OPTION>标签。

示例代码(在官网上的代码做了改动)

<!DOCTYPE html>

<html >

<head>

    

    <script>dojoConfig = {parseOnLoad: true}</script>



    <link rel="stylesheet" href="/lss/dojoroot/dijit/themes/claro/claro.css"> 

    <script src="/lss/dojoroot/dojo/dojo.js" ></script>  

    

    <script>

        require([

            "dijit/form/MultiSelect", 

            "dijit/form/Button",

            "dojo/dom", 

            "dojo/_base/window", 

            "dojo/domReady!"], 

            function(MultiSelect, Button, dom, win){

                var sel = dom.byId('dynamic');

                var n = 0;

                for(var i in dijit){

                        var c = win.doc.createElement('option');

                     c.innerHTML = i;

                     c.value = n++;

                     sel.appendChild(c);

                 }

   

                var myMultiSelect = new MultiSelect({ name: 'myMultiSelect' }, sel); myMultiSelect.startup(); new Button({

                    onClick: function(){

                        alert(myMultiSelect.get('value'));

                        }

                        }, "progbutton").startup();

                });

    </script>

</head>

<body class="claro">

    <select id="dynamic"></select>

<p><button id="progbutton" type="button">Get value</button></p>

</body>

</html>

 

你可能感兴趣的:(listbox)