基于另一下拉框选中值的包含关系修改jQuery联动下拉框代码

要实现下拉框2的选项值包含下拉框1选中值时自动选中对应选项，只需调整原代码的判断逻辑，同时完善空值处理场景：

$('select[name="ServicePropertySize"]').change(function() {
    var propertySizeSelected = $(this).val();
    var $priceSelect = $('select[name="PackageMowingPricePointWithText"]');
    
    // 先重置下拉框2的选中状态
    $priceSelect.val('');
    
    if (propertySizeSelected) {
        $priceSelect.find('option').filter(function() {
            // 检查当前选项的值是否包含下拉框1选中的尺寸值
            return $(this).val().includes(propertySizeSelected);
        }).prop('selected', true);
    }
});

关键改动说明： #

• 将原有的严格相等判断PropertySizeSelected === $(this).text()，替换为$(this).val().includes(propertySizeSelected)，实现"包含"关系的匹配
• 增加下拉框2的重置逻辑，避免切换选项时残留之前的选中状态
• 加入空值判断，当下拉框1选择默认选项时，下拉框2同步回到初始状态
• 变量名调整为符合JS规范的小驼峰命名（可选优化，提升代码可读性）

兼容旧浏览器版本： #

如果需要兼容不支持includes()方法的旧浏览器，可改用indexOf()实现：

return $(this).val().indexOf(propertySizeSelected) !== -1;

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