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>
时间: 2024-08-24 14:50:49

dojo:如何显示ListBox风格的选择框的相关文章

Unity编辑器扩展Texture显示选择框

学习NGUI插件的时候,突然间有一个问题为什么它这些属性可以通过弹出窗口来选中呢? 而我自己写的组件只能使用手动拖放的方式=.=. Unity开发了组件Inspector视图扩展API,如果我们要写插件方便别人来使用,使用编辑器扩展API让我们的组件显示的更华丽,使用方便 Texture弹出选择框选中图片赋值: 1个组件对应1个Edit扩展器,继承Editor必须让入Editor文件夹下 MyComponent: using UnityEngine; using System.Collectio

使用showOptionDialog显示多项选择框

-----------------siwuxie095 工程名:TestJOptionPane 包名:com.siwuxie095.showdialog 类名:TestOptionDialog.java 工程结构目录如下: 代码: package com.siwuxie095.showdialog; import java.awt.BorderLayout; import java.awt.EventQueue; import javax.swing.JFrame; import javax.s

百度编辑器UEditor 点击上传图片选择框会延迟几秒才会显示 反应很慢(转)

转自:http://www.blogxuan.com/php/show/323.html UEditor 编辑器点击上传文件选择框会延迟几秒才会显示,反应很慢,上传图片选择框显示很慢. 1.ueditor/dialogs/image/images.js中的下面代码 accept: {   title: 'Images',   extensions: 'jpg,jpeg,png',   mimeTypes: 'image/*'} 修改为: accept: {   title: 'Images',

类似于铁道部12306的城市选择框的实现

第一次写,有点小紧张... 这两天研究铁道部的余票查询系统,参考网上大牛们的经典案例,也有了一些自己的心得,写在自己程序猿的道路上记录一下,也和大家一起分享,写的不好莫怪,大牛可以自动过滤,非喜勿喷,谢谢~ 今天先简单的介绍一下城市选择框的实现,与12306官网有一点差距,上图,先看看效果:      如图所示,支持拼音首字母查询,全拼音查询,汉字查询等 好了,现在谈一谈我是怎么实现的 首先是准备工作: 我们需要把城市的信息存入我们的数据库中,城市数据来源:https://kyfw.12306.

微信开发 select选择框

最近在该企业微信的功能,要做一个微信界面,要使用select来做下拉选择框 部分前台HTML代码: 在选择分享组的时候,要从后台查询数据来做选择项 1 <form:form id="imgForm" modelAttribute="uploadImg" action="${oauthPath}/img/${agentKey}/submit" method="post"> 2 <input id="i

《JAVASCRIPT高级程序设计》选择框脚本和富文本编辑

一.选择框脚本 选择框也是表单的一个字段,是通过<select>和<option>元素来创建的,需要使用javascript来控制.选择框拥有以下的属性和方法: 以下介绍一些选择框的常用方法: 1.获取选择项 var selectbox = document.forms[0].elements["selectID"]; // 选择第0项的值和文本 var text = selectbox.options[0].text; var value = selectbo

Java知多少(87)选择框和单选按钮(转)

选择框.单选框和单选按钮都是选择组件,选择组件有两种状态,一种是选中(on),另一种是未选中(off),它们提供一种简单的 “on/off”选择功能,让用户在一组选择项目中作选择. 选择框 选择框(JCheckBox)的选中与否开状是一个小方框,被选中则在框中打勾.当在一个容器中有多个选择框,同时可以有多个选择框被选中,这样的选择框也称复选框.与选择框相关的接口是ItemListener,事件类是ItemEvent.JCheckBox类常用的构造方法有以下3个: JCheckBox():用空标题

Android 自学之列表选择框Spinner

列表选择框(Spinner)与Swing编程里面的Spinner不同,这里的Spinner其实就是一个列表选项框. Spinner是ViewGroup的间接子类,因此他也可作为容器使用. Spinner支持的常用XML属性和说明: XML属性 说明 android:prompt 设置该列表框的提示 android:entries 使用数组资源设置该下拉列表框的列表项目 啥都不说了我们看看代码: layout/main.xml 1 <?xml version="1.0" encod

Bootstrap系列 -- 15. 下拉选择框select

Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple.Bootstrap框架会为这些元素提供统一的样式风格 <form role="form"> <div class="form-group"> <select class="form-control"> <option>1</option> <option>2</