点击按钮后如何按文本匹配自动选中select下拉框对应option？

问题根因 #

• 执行时机错误：你把逻辑写在document.ready回调中，此时点击按钮才会加载的模态框DOM还没插入页面，根本找不到.room-select元素，逻辑自然不生效
• 匹配逻辑错误：filter里用===全等匹配，而你的option文本是带价格前缀的（比如示例里的750€ - Studio Exclusive），和data-title的值不是完全相等，所以匹配不到对应选项
• 属性设置问题：用attr('selected', true)在动态修改选中状态时可靠性不足，jQuery官方推荐用prop修改表单元素的选中、禁用这类状态属性

正确实现代码 #

jQuery(document).ready(function($) {
  // 绑定按钮点击事件
  $('.roomBtn').on('click', function() {
    // 取当前点击按钮的data-title值，用data()方法比attr()更规范
    const targetText = $(this).data('title');
    
    /* 注意：如果你的下拉选项是通过异步接口加载的，
       请把下面的选中逻辑放到异步请求成功的回调里，确保option已经插入DOM再执行 */
    // 临时用setTimeout等待动态DOM插入，生产环境可以替换为模态框的「显示完成」事件监听
    setTimeout(() => {
      // 匹配文本包含目标值的option，设置为选中状态
      $('.room-select option').filter(function() {
        return $(this).text().includes(targetText);
      }).prop('selected', true);
    }, 0);
  });
});

补充说明 #

• 如果你用的是Bootstrap这类框架的模态框，可以监听shown.bs.modal事件来执行选中逻辑，比setTimeout时序更稳定
• 如果需要严格匹配文本后缀而不是任意位置包含，可以把判断条件改成return $(this).text().endsWith(targetText)，更适配你示例里的文本格式

内容的提问来源于stack exchange，提问作者HCU-Memory