如何通过jQuery根据选中房间选项修改输入框的max属性值？

这其实很简单，我们只需要监听下拉框的选择变化事件，根据选中的房间动态调整输入框的max属性就行，给你完整的实现方案：

// 确保DOM完全加载后再执行代码
$(document).ready(function() {
  // 绑定房间选择框的change事件
  $('select[name="room"]').on('change', function() {
    const selectedRoom = $(this).val();
    const guestsInput = $('input[name="guests"]');
    
    // 判断选中的房间，设置对应的max值和提示文本
    if (selectedRoom === 'Room2') {
      guestsInput.attr('max', 10);
      guestsInput.attr('placeholder', '1-10');
    } else {
      guestsInput.attr('max', 8);
      guestsInput.attr('placeholder', '1-8');
    }
  });
  
  // 页面初始化时触发一次change事件，确保默认选中项对应的max值生效
  $('select[name="room"]').trigger('change');
});

关键细节说明： #

• DOM加载完成再绑定事件：用$(document).ready()包裹代码，避免页面元素还没加载就去绑定事件导致找不到元素的问题。
• 监听change事件：每次用户切换房间选项时，都会触发这个事件来更新输入框的属性。
• 动态更新属性：通过attr()方法修改输入框的max属性，同时更新placeholder可以让用户直观看到当前允许的客人数量范围，提升体验。
• 初始化触发事件：页面刚加载时，下拉框有默认选中项，手动触发一次change事件可以确保输入框的初始状态和默认房间匹配，不用等用户手动切换才生效。

如果你更倾向于使用jQuery官方推荐的prop()方法来处理元素属性，把attr()换成prop()也完全可以，效果是一致的：

// 示例：用prop()修改属性
guestsInput.prop('max', 10);

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