如何使用jQuery从下拉列表中选择完全匹配的指定选项

解决方案 #

你遇到的问题根因是jQuery 内置的:contains选择器仅做子串包含匹配，不会校验全字相等，所以才会出现短字符串匹配到更长包含项的情况。可以通过filter()方法自定义过滤规则，实现精准的完全文本匹配：

function SetDefaultCarrier(orderCarrier) {
    $("#carrierdropdown option").filter(function() {
        // 此处加$.trim是为了规避选项文本/传入参数前后带多余空格导致匹配失败的问题，不需要可以直接去掉
        return $.trim($(this).text()) === $.trim(orderCarrier);
    }).attr('selected', true);
}

如果你的项目使用的是jQuery 1.6及以上版本，更推荐使用prop()方法替代attr()设置选中状态，prop()操作的是DOM元素的实时属性，比操作HTML原始属性的attr()更稳定：

function SetDefaultCarrier(orderCarrier) {
    $("#carrierdropdown option").filter(function() {
        return $.trim($(this).text()) === $.trim(orderCarrier);
    }).prop('selected', true);
}

如果需要支持大小写不敏感的匹配，只需要将两边的文本统一转为小写或者大写后再做比较即可：

return $.trim($(this).text()).toLowerCase() === $.trim(orderCarrier).toLowerCase();

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