當選中複選框時，刪除下拉選項

我有一個下拉列表和幾個選項。情況是，如果複選框被選中，則下拉列表中的一個特定選項應該被刪除，並且當它被取消選中時，該選項應該再次出現。當選中複選框時，刪除下拉選項

下面提到的是在我的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"); 
}

來源

2014-11-23 Pramit Sinha

好吧，如果你使用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);

來源

2014-11-27 10:47:31 g00glen00b

當選中複選框時，刪除下拉選項

回答

相關問題