根据所选选项更改输入最大值

Question

假设我有4个房间的选择标签：

<select name ="room">
<option value="Room1">Room 1</option>
<option value="Room2">Room 2</option>
<option value="Room3">Room 3</option>
<option value="Room4">Room 4</option>
</select><br>
<label for="guests">Total guests:</label>
<input class="bookinfo" type="number" name="guests" min="1" max="8" placeholder="1-8" required>

在这个标签之后，我有一个输入，显示每个房间可以有多少客人。不过，2号房间可容纳10人，而不是8人。有没有一种方法可以用jquery来改变这一点？

Answer 1

如您所见，每当更衣室max和placeholder发生变化时，我都会创建一个功能检查：

function CheckGuest(el){
if(el.value == 'Room2'){
document.getElementById("bookinfo").max = 10;
document.getElementById("bookinfo").placeholder = "1-10";
}else{
document.getElementById("bookinfo").max = 8;
document.getElementById("bookinfo").placeholder = "1-8";
}
}

<select name ="room" onChange="CheckGuest(this)">
<option value="Room1">Room 1</option>
<option value="Room2">Room 2</option>
<option value="Room3">Room 3</option>
<option value="Room4">Room 4</option>
</select><br>
<label for="guests">Total guests:</label>
<input class = "bookinfo" id="bookinfo"   type="number" name="guests" min = "1" max ="8" placeholder="1-8" required>

我的改变：

• 每次换房间时为活动功能添加onChange事件
• 将ID添加到input中，用javascript进行选择
• 创建更改max值和placeholder的函数

我建议你阅读这个网站你可能不需要jQuery