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

我现在有一个没有显示在仪表板上的网格列表，我需要在仪表板上显示这些网格，所以我单击下拉项，它应该显示在仪表板上，并从下拉列表中删除。我正在使用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();

我在网格上有交叉按钮，如果用户可以单击交叉按钮，则该项应该在下拉列表中可见。但如果我重复这些步骤，该项不会从下拉列表中隐藏

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

我正在使用此代码从网格中删除项并重新绘制网格

谢谢

---

Prince Chopra

以下代码将帮助您了解如何修复此问题

示例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>

---

请你更新一下答案是否适合你。如果有效，请接受答案。