FilteringSelect with a delimiter

时间:2013-11-05 13:32:38

标签: dojo

以下代码工作正常,但一次只有一个值,我希望选择多个值以逗号分隔。 例如我从下拉列表中选择了Alabama,然后当我给逗号做例子:Alabama,并输入一个新的字母,比如C [例如:Alabama,C],下一组项目必须显示在下拉列表中 最后,我将在TextBox示例中使用以下值:加利福尼亚州阿拉巴马州

<html >
<head>
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
    <script>dojoConfig = {parseOnLoad: true}</script>
    <script src='dojo/dojo.js'></script>
    <script>
require([
    "dojo/store/Memory", "dijit/form/FilteringSelect", "dojo/domReady!"
], function(Memory, FilteringSelect){
    var stateStore = new Memory({
        data: [
            {name:"Alabama", id:"AL"},
            {name:"Alaska", id:"AK"},
            {name:"American Samoa", id:"AS"},
            {name:"Arizona", id:"AZ"},
            {name:"Arkansas", id:"AR"},
            {name:"Armed Forces Europe", id:"AE"},
            {name:"Armed Forces Pacific", id:"AP"},
            {name:"Armed Forces the Americas", id:"AA"},
            {name:"California", id:"CA"},
            {name:"Colorado", id:"CO"},
            {name:"Connecticut", id:"CT"},
            {name:"Delaware", id:"DE"}
        ]
    });
    var filteringSelect = new FilteringSelect({
            id: "stateSelect",
            name: "state",
            value: "CA",
            store: stateStore,
            searchAttr: "name"
    }, "stateSelect");
});
</script>
</head>
<body class="claro">
    <input id="stateSelect">
<p>
    <button onclick="alert(dijit.byId('stateSelect').get('value'))">Get value</button>
    <button onclick="alert(dijit.byId('stateSelect').get('displayedValue'))">Get displayed value</button>
</p>
</body>
</html>

2 个答案:

答案 0 :(得分:0)

Dojo过滤选择窗口小部件不允许选择多个项目。考虑使用Dojo MultiSelect小部件作为替代方案。

请参阅:

http://dojotoolkit.org/reference-guide/1.9/dijit/form/MultiSelect.html

答案 1 :(得分:0)

你应该看看CheckedMultiSelect:

https://dojotoolkit.org/reference-guide/1.9/dojox/form/CheckedMultiSelect.html

它包含下拉菜单和多项目。要更改显示的标签,有趣的代码在函数_updateSelection中:

        this.dropDownButton.set("label", this.multiple ?
            lang.replace(this._nlsResources.multiSelectLabelText, {num: i}) :
            label);

显示标签n item(s) selected。如果你想用逗号分隔项目,那么它就是插入代码的好地方。