当选中复选框时，删除下拉选项

Question

我有一个下拉列表和几个选项。情况是，如果复选框被选中，则下拉列表中的一个特定选项应该被删除，并且当它被取消选中时，该选项应该再次出现。

下面提到的是在我的JSP文件中下拉的代码。

<select id = "test" name = "test" onChange = "callJSfunction()"> 
    <c:forEach items="${DropDownItemsArrayList}" var="type"> 
     <option value="${type}" tempCode="${type}" > 
      <spring:message code="code.label.${type}" /> 
     </option> 

    </c:forEach> 
</select> 

的复选框的代码

<input 
    id="checkBoxTest" 
    onclick="updateJSFunction(this);" 
    type="checkbox" 
    name="checkBoxTest" 
    dojotype="rmt.YNCheckBox" 
    <c:if test="${testConditionFromJSP}">checked</c:if>/> 

JavaScript函数我的工作是这样的 -

updateJSFunction = function(checkBox){ 
    var flag = dojo.byId(checkBox).value; 
    var a = dojo.byId("test"); 
    var b = a.options[a.selectedIndex].getAttribute("tempCode"); 
} 

Answer 1

好吧，如果你使用dojo/query，你可以使用orphan()删除选项并after()或append()恢复选项。随着append()您可以重新添加上的最后一个位置的选择，但如果你想保持的位置，你必须将前一个节点（prev()）存储在一个变量，并使用after()它来恢复选项。

例如，要删除一个选项，您可以使用：

var setPrevious = function(node) { 
    previous = node; 
}; 

orphan = query("#test") 
    .query("[tempCode=" + tempCodeRemoval + "]") 
    .prev().forEach(setPrevious) 
    .next().orphan(); 

这将设置一个节点在previous，移除的节点orphan，也将其删除。

要恢复它，你可以使用：

query("#test").query(previous).after(orphan); 

如果你把一切融合在一起，你能想出这样的事情：

require([ 
    "dojo/query", 
    "dojo/NodeList-data", 
    "dojo/NodeList-traverse", 
    "dojo/NodeList-manipulate", 
    "dojo/NodeList-dom", 
    "dojo/domReady!" 
], function(query) { 
    var tempCodeRemoval = "L", orphan = null, previous = null; 

    var setPrevious = function(node) { 
     previous = node; 
    }; 

    query("#checkBoxTest").on("change", function(evt) { 
     if (evt.target.checked) { 
      orphan = query("#test") 
      .query("[tempCode=" + tempCodeRemoval + "]") 
      .prev().forEach(setPrevious) 
      .next().orphan(); 
     } else if (orphan != null) { 
      query("#test").query(previous) 
      .after(orphan); 
      orphan = null; 
      previous = null; 
     } 
    }); 
}); 

演示：http://jsfiddle.net/kfcyvpe8/

---

如果该元素的位置并不重要（所以如果允许将该选项添加为最后一个元素），那么你就可以更容易，你可以删除链中的以下内容：

.prev().forEach(setPrevious).next() 

而且你可以删除setPrevious()功能。添加选项再次变得更容易，以及，你可以简单地使用：

query("#test").append(orphan);