Question

这是我昨天遇到的一个问题的延续，所以如果它看起来很熟悉，那就是为什么:)这是一个不同的问题！

所以我最初在页面上创建了另一个dijit.form.Select，就像这样;

<c:set var="clazzId" value="${verification.clazz.id}" />
<div id="clazzOptions">
    <select id="clazz" name="clazz" style="width:22em" dojoType="dijit.form.Select" maxHeight="140">
        <option value="-1" label="                      " />
        <c:forEach items="${requestScope.clazzes}" var="clazzItem">
            <c:choose>
                <c:when test="${clazzId eq clazzItem.id}">
                    <option value="${clazzItem.id}" selected = "true">${clazzItem.name}</option>
                </c:when>
                <c:otherwise>
                    <option value="${clazzItem.id}">${clazzItem.name}</option>
                </c:otherwise>
            </c:choose>
        </c:forEach>
    </select>  
</div>

然后我有一些javascript，我试图用来交换div“clazzOptions”的内容，具体取决于从不同的下拉菜单中选择的值（这里没有看到）。如果是某个值，则用文本消息替换div，如果是其他任何值，则重新显示原始dijit.form.Select;

<script type="text/javascript">
    var classDropDown;
    var classPhDMessage = "PhD's do not require a Class or Grade";

    dojo.addOnLoad(function() {
        classDropDown = dojo.byId('clazzOptions').innerHTML;
    });

    function checkForPHD() {
        var awardOption = dijit.byId('qualification').attr('displayedValue');

        if(awardOption == "PhD"){
            dojo.byId('clazzOptions').innerHTML = classPhDMessage;
        } else {
            dojo.byId('clazzOptions').innerHTML = classDropDown;
        }
     }
</script>

正如您所看到的，我正在尝试捕获div的innerHTML，因为它是在页面加载时，然后取决于在另一个下拉（未看到）中选择的值在预定义消息和捕获的div内容之间的变化

问题在于，在原始div内容被替换为消息之后，选择再次从“PhD”改变并且原始div innerHTML被放回到div中，dijit.form.Select重新出现但是完全是空的，实际上根本不可用？如果我删除dijit.form.Select dojoType并将其保留为普通选择，则整个操作完美无缺，但我有点需要它是dijit.form.Select。

为什么dijit.form.Select在这种情况下不起作用，而普通选择呢？

Answer 1

您不应该使用innerHTML来添加/删除dijit，尤其是在您尝试重新使用它们时。

dijit是HTML和Javascript的组合，可以被认为比简单的特定节点的内容“更复杂”。

您有多种选择：

禁用您的dijit.form.Select并在其下添加一个小注释（或设置它的值），说明它被禁用的原因（这通常是比移除控件更好的UI范例）。根据您的用户界面，这是我尝试做的事情
创建<span>作为dijit.form.Select的兄弟，并使用CSS一次显示/隐藏其中一个。

显然，当你提交表单时，你仍然会得到dijit.form.Select的值，但是因为你做服务器端验证以及客户端验证（我希望:)这不会是一个问题< / p>
使用dojo.data API从"${requestScope.clazzes}"迭代器创建数据存储区。当您（以编程方式）创建dijit.form.Select时使用此商店。跟踪某处Select的当前值。如果您不需要它，请调用yourSelect.destroy()以正确销毁它，然后在需要时再创建一个新值并将其值设置为之前保存的值。

这对我来说似乎是不必要的代价。

dijit.form.Select重新出现无人居住？

1 个答案: