更改 select 值时阻止加载页面

Question

我的表单中有这个 select 标签，其中包含房间的名称

<select class = 'form-control' id = 'room_select' name = 'room'>".$rooms."</select>

我有 4 个房间，所以这个 select 包含 4 个选项

$(document).ready(function(){
$("select").msDropDown();
$("#room_select").change(function(e){
    e.preventDefault();
    $("#room_select_form").submit();  
});
$("#room_select option[value='<?php echo $room; ?>']").attr('selected', 'selected');
});

然后我得到了这个 doc ready 功能第一个 .msDropDown(); 是能够在选项中获取图像。然后我得到了我用谷歌搜索的更改功能并放入了一个 preventedDefault 以不刷新页面，（仍然刷新）我认为我可以使用 ajax 功能来做到这一点但我真的不知道如何写下来或者即使它有效。

所以目前的问题是我的函数更改了代码中最后看到的房间值，但它刷新了 select 标签，我再次看到房间号 1，

Answer 1

您的页面正在刷新，因为您正在 onchange 侦听器中提交表单。您需要在表单提交监听器中放置 e.preventDefault(); 以防止默认表单提交，然后您可以在提交监听器中调用 ajax。

$(document).ready(function(){
$("select").msDropDown();
$("#room_select").change(function(e){
    $("#room_select_form").submit();  
});
$("#room_select option[value='<?php echo $room; ?>']").attr('selected', 'selected');
$("#room_select_form").submit(function(e){
  e.preventDefault(); // to prevent page refresh
  // your Ajax call goes here....

});
});

更改 select 值时阻止加载页面

Prevent loading page when changing select value

javascript

ajax

jquery

preventdefault