jquery隐藏表格中的额外下拉菜单

Posted 2023-03-27

【中文标题】jquery隐藏表格中的额外下拉菜单

【英文标题】：jquery hide extra dropdowns in a table

【发布时间】：2013-05-10 19:25:55

【问题描述】：

我在一个页面上有多个表格，每个表格中可能有多个下拉菜单。表格和下拉列表是自动生成的。我要定位的表具有数字 ID，并且下拉列表的所有值都是数字。

我要定位的表之一的 html 示例代码

<table id="15">
 <tr>
  <td>
   <div id="dd_4_0">
    <select id="4_0">
     <option value=""></option>
     <option value="18">VNDR64324</option>
     <option value="21">MFG5321</option>
     <option value="27">OTHER</option>
    </select>
   </div>
  </td>
 </tr>
 <tr>
  <td>
   <div id="dd_2_6">
    <select id="2_6">
     <option value=""></option>
     <option value="12">VN32R2345</option>
     <option value="21">5678</option>
     <option value="27">NEM</option>
    </select>
   </div>
  </td>
</tr>
</table>

一旦选择了表格中的一个下拉菜单，我想隐藏其他下拉菜单。 我有可以工作的代码，但是如果可能的话，我想通过循环进行很多迭代。有没有更简洁的方法来写这个？

$('table').click(function() 
    if($.isNumeric(this.id))
        dd = $("#" + this.id + " select");
        $.each(dd, function()
            if($.isNumeric($(this).val()))
            
                selectedId = this.id;
                $.each(dd, function()
                    if(this.id != selectedId)
                        $('#dd_' + this.id).hide();
                );

            
        );
);

【问题讨论】：

您无权修改生成表格的代码？添加一些课程确实可以让您的生活更轻松。

2_6 不是数字。

是的，这都是我的，所以我可以在那里编辑任何东西。但是，这就是说我的下拉菜单都是选择的下拉菜单，这是一个 jquery 插件，它添加了自己的类并做了一些重复，这使得添加额外的类变得困难。

我没有检查下拉列表或 div Id 是否为数字。

您可以使用.filter() 代替$.each()，但基本相同。 jQuery 没有任何基于模式或正则表达式匹配 ID 或值的方法。

【参考方案1】：

我会在相关表中添加一个通用类，然后这样做：

$(".table_class select").change(function()
    var $this = $(this);

    if($this.val() != "")
        $this.closest(".table_class").find("select").not($this).hide();
     else 
        // if you want, re-show them if the select is de-selected
        $this.closest(".table_class").find("select").show();
    
);

【讨论】：

这两种解决方案都非常有意义并且应该可以工作，但我还没有得到它们。可能我的代码中的其他内容会导致问题。不过感谢您的意见！

【参考方案2】：

一旦选择了表格中的一个下拉菜单，我想隐藏其他下拉菜单。

我不知道我是否得到你，但最短的方法（我能想到的..）将调用select 的change() 事件

试试这个

$('select').change(function()
   $(this).parents('tr').find('select').not($(this)).hide(); 
);

但是，这会选择文档中存在的所有选择元素...如果您确定表格之外或页面中的任何其他地方不会有其他选择元素...那么这应该可以工作...否则您可以为每个表添加类并为该表调用选择器仅选择...

working fiddle here

【讨论】：

我在表格示例中犯了一个错误。所有下拉列表都在它们自己的 tr 标签以及它们自己的 tds 中。有没有办法修改父母（'tr'）来引用表格？

yes ...将tr替换为table...但请注意，这将选择所有父母table..只要您没有任何表格包裹此表格..这应该可以工作..例如小提琴jsfiddle.net/bipen/TD4cH/1

这两种解决方案都非常有意义并且应该可以工作，但我还没有得到它们。可能我的代码中的其他东西会导致问题。感谢您的意见！