jQuery筛选select下拉框option匹配成功却无法自动选中问题

问题原因 #

你遇到的匹配后无法选中option的问题核心由3个原因导致：

• 分隔符不匹配：你拼接目标字符串时用的是半角减号-，但HTML下拉选项里的分隔符是长破折号–，二者字符编码完全不同，直接拼接会导致绝大多数场景下匹配失效
• 文本携带冗余空白：通过.text()接口拿到的DOM文本默认会包含标签前后的换行、空格，你没有做去空处理就直接拼接，会导致匹配串和实际option文本不一致
• 前缀取值不符合预期：你用来取前缀的#change_service_booked下拉框默认选中的是data-prefix="SP"的选项，拼出来的匹配串带的是#SP，如果要匹配带#KO的选项，需要先切换该下拉框的选中项到对应KO的选项。

修复方案 #

推荐不用依赖固定分隔符的匹配逻辑，分开校验标题和前缀两个特征，规避符号差异导致的匹配问题，修复后的代码如下：

// 取值时先做trim去掉前后空白
let n = $('#change_service_booked').find(':selected').data('prefix').trim();
let t = $('.booked-appointment-details > .appointment-title').text().trim();

// 匹配时分开判断两个特征都存在即可，不用管中间的分隔符是什么
let titleValue = $(".field-paid-service-select option").filter((i, e) => {
    const optionText = e.innerHTML.trim();
    return optionText.includes(t) && optionText.includes(`#${n}`);
}).val();

// 匹配到有效值再执行选中禁用逻辑，避免清空下拉框
if(titleValue) {
    $(".field-paid-service-select").val(titleValue).attr("disabled", true);
}

验证说明 #

你可以手动将#change_service_booked的选中项切换为Schools（对应prefix为KO），运行代码后就能看到对应带Tallinna Ülikooli nutistuudio – #KO的option被正常选中，下拉框也会被禁用。

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