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();
});

单击下拉项时，它应显示在仪表板上并从下拉列表中删除

1 个答案: