更改选择值时防止加载页面

Question

我在表单中获得了这个选择标签，其中包含一个房间的名称

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

我有4个房间，因此此选择包含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');
});

然后我首先获得了此文档就绪功能.msDropDown();，以便能够在选项中获取图像。然后我得到了围绕我搜索的change函数，并放了一个preventedDefault以不刷新页面，（仍然刷新）我以为我可以使用ajax函数来做到这一点，但我真的不知道如何记下它，即使它作品。

因此，当前的问题是我的函数更改了房间值，如代码中最后看到的，但是它刷新了select标签，并且我再次看到了房间nr 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....

});
});