如何使用jQuery实现点击链接选中表单多选下拉框所有选项

实现代码 #

直接引入jQuery后插入以下代码即可生效：

$(document).ready(function() {
  // 绑定全选链接点击事件
  $('a[href="#"]').click(function(e) {
    e.preventDefault();
    // 选中所有有效国家选项，跳过第一个空值提示项
    $('select[name="usp-taxonomy-country[]"] option').not('[value=""]').prop('selected', true);
  });
});

适配说明 #

• 如果你需要保留第一个「Please select..」空选项不被选中，上述代码已默认实现该逻辑，不需要调整
• 如果需要连空选项一起选中，删除.not('[value=""]')即可
• 如果你把链接文字改成了中文(全选所有国家)，也可以把触发事件的选择器换成$('a:contains("全选所有国家")')，匹配更精准

中文表单替换参考 #

如果你需要把原有表单内容全部汉化，可以使用以下代码替换原有表单：

<fieldset class="usp-fieldset usp-fieldset-default">
<select name="usp-taxonomy-country[]" required="required" data-required="true" multiple="multiple" class="usp-input usp-input-taxonomy custom-taxonomy usp-select">
<option value="">请选择..</option>
<option value="11">美国</option>
<option value="12">加拿大</option>
<option value="13">英国</option>
<option value="14">澳大利亚</option>
<option value="15">新西兰</option>
</select>
</fieldset>

<a href="#">(全选所有国家)</a>

内容的提问来源于stack exchange，提问作者ricard0