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

Question

我在一个页面上有多个表格，每个表格中可能有多个下拉菜单。表格和下拉列表是自动生成的。我要定位的表具有数字 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();
                });

            }
        });
});

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

Answer 2

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

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

试试这个

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

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

working fiddle here