Dojo/Dijit 问题和表单选择中的空白选项

Question

我对 Dojo 很陌生，我遇到了以下问题。

我有以下由 spring roo 生成的表单选择：

<div id="_f_trc_suivi_domain_Pli_conteneurNum_id">
            <label for="_conteneurNum_id">Conteneur Num : </label>
            <select id="_conteneurNum_id" name="conteneurNum">
            <option value="">Tous</option>
                <option value="1">951</option>
                <option value="2">753</option>
                <option value="3">753159</option></select><br />
            <script type="text/javascript">
                Spring.addDecoration(new Spring.ElementDecoration({
                    elementId : '_conteneurNum_id',
                    widgetType : 'dijit.form.FilteringSelect',
                    widgetAttrs : {
                        hasDownArrow : true
                    }
                }));
            </script>
        </div>

在萤火虫中导致以下结果：

    <div wairole="combobox" dojoattachpoint="comboNode"
        id="widget__conteneurNum_id"
        class="dijit dijitReset dijitInlineTable dijitLeft dijitTextBox dijitComboBox dijitTextBoxError dijitComboBoxError dijitError"
        role="combobox" widgetid="_conteneurNum_id"
        aria-labelledby="_conteneurNum_id_label" aria-expanded="false">
        <div dojoattachevent="onmousedown:_onArrowMouseDown"
            wairole="presentation" dojoattachpoint="downArrowNode"
            class="dijitReset dijitRight dijitButtonNode dijitArrowButton dijitDownArrowButton dijitArrowButtonContainer"
            role="presentation">
            <input type="text" wairole="presentation" readonly="" tabindex="-1"
                value="? " class="dijitReset dijitInputField dijitArrowButtonInner"
                role="presentation">
        </div>
        <div class="dijitReset dijitValidationContainer">
            <input type="text" wairole="presentation" readonly="" tabindex="-1"
                value="? "
                class="dijitReset dijitInputField dijitValidationIcon dijitValidationInner"
                role="presentation">
        </div>
        <div class="dijitReset dijitInputField dijitInputContainer">
            <input type="text" waistate="haspopup-true,autocomplete-list"
                wairole="textbox" dojoattachpoint="textbox,focusNode"
                dojoattachevent="onkeypress:_onKeyPress,compositionend"
                autocomplete="off" class="dijitReset dijitInputInner"
                role="textbox" aria-haspopup="true" aria-autocomplete="list"
                id="_conteneurNum_id" tabindex="0" aria-required="true"
                aria-invalid="true" value="" aria-owns="_conteneurNum_id_popup"><input
                type="hidden" name="conteneurNum" value="">
        </div>
    </div>

但不幸的是，它总是在值为“Tous”的空白选项上方显示一个白色选项。

请看下面的 gif：

我做错了什么？欢迎任何线索。

编辑：我确定问题出在这个：<option value="">Tous</option> 尤其是value="" 部分。我可以改写和细化我的问题如下：如何确保 Dojo/Dijit 正确处理此问题：value=""??

Answer 1

只需按预期将 0 值放在那里。我对以下代码没有任何问题：

<div id="_f_trc_suivi_domain_Pli_conteneurNum_id">
        <label for="_conteneurNum_id">Conteneur Num : </label>
        <select id="_conteneurNum_id" name="conteneurNum">
            <option value="0">Tous</option>
            <option value="1">951</option>
            <option value="2">753</option>
            <option value="3">753159</option>
          </select><br />
        <script type="text/javascript">
            Spring.addDecoration(new Spring.ElementDecoration({
                elementId : '_conteneurNum_id',
                widgetType : 'dijit.form.FilteringSelect',
                widgetAttrs : {
                    hasDownArrow : true
                }
            }));
        </script>
    </div>

Answer 2

在与 MyEclipse 2014、Spring 3.1 和旧的 Dojo/Dijit 版本搏斗几个小时后，我刚刚找到了一种解决方法，我知道这是旧版本，但 MyEclipse 将这些旧版本的所有东西都打包在一起，让人抓狂。

我尝试了 FilteringSelect、使用空值选择、使用值的 html 选项，并替换了混淆项目其余部分的 dojo 库。所以如果它可以帮助任何人，我会在这里发布：

这种情况很常见，如果你想在你的选择中使用一个虚拟提示选项，比如'-- 选择项--' 带有一个空值。 Dojo/dijit 版本与 MyEclipse 一起打包到 spring-js-2.3.1.RELEASE 中，用下拉列表中显示的分隔符将选项替换为空值。正如您在 Craig Swing 的小提琴中看到的那样，在 Dojo/Dijit 的最后几个版本中，这种行为似乎得到了纠正。

如果你绑定的属性不是字符串，你可以指定一个espace作为dummy选项的值而不是null，因为稍后会在控制器中绑定为null，所以会显示dummy选项。例如：

<option selected="selected" value="">Tous</option>

但是如果属性是一个字符串，这样你会在你的控制器的属性中发现一个不需要的空格。

所以我最终选择直接修改Select.js

将它放在你的项目中 webapps/resources/dijit/form/Select.js 注释这行：

/*
if(!_1.value){
return new dijit.MenuSeparator();
}else{
*/
var _2=dojo.hitch(this,"_setValueAttr",_1);
var _3=new dijit.MenuItem({option:_1,label:_1.label,onClick:_2,disabled:_1.disabled||false});
dijit.setWaiRole(_3.focusNode,"listitem");
return _3;
/*
}
*/

并且不要忘记在 web.xml 中为 Resource Servlet 覆盖此路径：

<servlet-mapping>
    <servlet-name>My Servlet</servlet-name>
    <url-pattern>/resources/dijit/form/Select.js</url-pattern>
</servlet-mapping>