我有几个表格需要使用一些多选框(附属公司列表、来源列表、产品列表等)。每个表格都可以拥有自己的一组多选框,以满足客户需求。
我还创建了一个链接,允许用户“选择所有”多选框中的选项。目前看来一切运行良好!但我想让jquery变得更加智能。
以下是我的代码示例:
我还创建了一个链接,允许用户“选择所有”多选框中的选项。目前看来一切运行良好!但我想让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代码中的新行。