當點擊下拉菜單中的項目應該顯示在儀表盤，並從下拉列表中

Question

我有不通過儀表盤顯示現在網格列表中刪除，我需要證明這些網格在儀表板，所以我點擊下拉菜單項，以便它應顯示在儀表板上並從下拉列表中移除。我正在使用jQuery的.hide（）從下拉列表中隱藏該項目。在第一種情況下，它會從下拉列表中刪除項目。

而且我在網格十字按鈕，如果用戶可以點擊該十字按鈕的項目應在下拉列表中可見。但是如果我重複步驟，該項目不會從下拉列表中隱藏。

var name = "#" + e.getAttribute("name"); 
      $(name).hide(); 
      var widgetId = "#" + e.getAttribute("name") + "Widget"; 
      $(widgetId).addClass("widget"); 
      //$("#" + e.getAttribute("gridName") + "Grid").data('kendoGrid').dataSource.read(); 
      $(widgetId).show(); 
      CreateWidgets(); 

我使用這個代碼從網格中刪除項目，並重繪網格。

感謝 喬普拉王子

Answer 1

下面的代碼將幫助您獲取有關如何解決這個問題的想法，

http://jsfiddle.net/FhcFy/

樣本HTML

<select id="gridSelection"> 
    <option value="0">Select a option</option> 
    <option value="1">grid 1</option> 
    <option value="2">grid 2</option> 
    <option value="3">grid 3</option> 
    <option value="4">grid 4</option> 
    <option value="5">grid 5</option> 
</select> 
<button id="show">show</button> 
<div class="gridContainer"> 
    <div id="grid1">Grid 1<span>x</span>  
    </div> 
    <div id="grid2">Grid 2<span>x</span>  
    </div> 
    <div id="grid3">Grid 3<span>x</span>  
    </div> 
    <div id="grid4">Grid 4<span>x</span>  
    </div> 
    <div id="grid5">Grid 5<span>x</span>  
    </div> 
</div> 

的JavaScript，

$(document).on("click", "#show", function (e) { 
    var selectedGrid = $("#gridSelection").val(); 
    $("#gridSelection option[value=" + selectedGrid + "]").hide(); 
    $("#gridSelection").val(0); 
    $(".gridContainer").find("#grid" + selectedGrid).data("option", selectedGrid).show();  
}); 

$(".gridContainer").on("click", "span", function() { 
    var grid = $(this).closest("div"); 
    grid.hide(); 
    $("#gridSelection option[value=" + grid.data("option") + "]").show(); 
});