jquery 选择下一个多选框中的所有选项

Question

我有几个表单需要使用一些多选框。 (附属公司列表、来源列表、产品列表等...)每个表单都可以有自己的一组多功能框，以满足我的客户的任何需求。

我还创建了一个链接，允许用户“选择所有”任意多选框中的选项。到目前为止，一切进展顺利!但我想让 jquery 更智能一点。

这是我编码的示例:

<table>
    <tr>
        <td><div id="allaffs" class="selectAll">select all</div></td>
    </tr>
  <tr>
    <td>
    <select name="affid[]" id="affid" size="15" style="width:230px;height:300" multiple="multiple">
      <option value="0" selected="selected">--no affiliate assigned--</option>
        <? while($r = mysql_fetch_array($somequerystuff)){  ?>
      <option value="<?php echo $r['affid']; ?>" selected="selected"><?php echo $r['affname']; ?></option>
      <? } ?>
    </select>   
    </td>
  </tr>
</table>

<table>
    <tr>
        <td><div id="allsources" class="selectAll">select all</div></td>
    </tr>
  <tr>
    <td>
    <select name="sourceid[]" id="sourceid" size="15" style="width:230px;height:300" multiple="multiple">
      <option value="0" selected="selected">--no source assigned--</option>
        <? while($r = mysql_fetch_array($somequerystuff)){  ?>
      <option value="<?php echo $r['sourceid']; ?>" selected="selected"><?php echo $r['sourcename']; ?></option>
      <? } ?>
    </select>   
    </td>
  </tr>
</table>

<script language="javascript" type="text/javascript">
$(document).ready(function(){

  $(".selectAll").click(function(){
    var theID = $(this).attr('id');
    if(theID=='allaffs'){ $("#affid option").attr("selected","selected"); }
    if(theID=='allsources'){ $("#sourceid option").attr("selected","selected"); }
  });

});
</script>

这完全有效。但出于其他过滤原因，我倾向于添加更多多选框。我想让 jquery 检测 .selectAll 类的单击事件，但使其足够智能，可以选择下一个可用多框中的所有选项。这样我就不必在 jquery 代码中为新框创建新行。

Answer 1

我不会使用位置(下一个可用的多框)，而是使用数据属性来存储相关多框的 ID。

<div class="selectAll" data-multi-id="sourceid">select all</div>

然后在你的脚本中:

<script language="javascript" type="text/javascript">
    $(document).ready(function(){  
        $(".selectAll").click(function(){    
            var multi = $(this).data('multi-id');
            $('#' + multi + ' option').attr('selected', 'selected');
        });
    });
</script>