Question

我有以下表格，有两个选择：

<form id="form" class="form_visitar" method="post" action="ajax/selects.php">
    <select name="select-local" class="select-index">
            <option value="">'.$select_visitar_tipo.'</option>
        <option value="1">'.$select_visitar_rest.'</option>
    <option value="2">'.$select_visitar_bar.'</option>
    <option value="3">'.$select_visitar_cafe.'</option>
</select>
<select name="select-precio" class="select-index">
    <option value="">'.$select_visitar_precio.'</option>
    <option value="1">'.$select_visitar_p1.'</option>
    <option value="2">'.$select_visitar_p2.'</option>
    <option value="3">'.$select_visitar_p3.'</option>
</select>                       
</form>

我想要发生的是：在我从下拉列表中选择一些东西后（点击它们之后我没有提交按钮）我希望通过ajax获取值来进行查询。我很擅长使用ajax功能，我觉得我可能不会像我想的那样得到它。到目前为止，这是我的ajax函数（现在，choices.php只是一个将在div中显示以进行测试的消息）：

<script type="text/javascript">
    $(".form_visitar").click(function() {
    $.ajax({
        type: "POST",
        url: $(this).attr("action"),
        data: $(this).serialize(),
        success: function(data) {
            $("#result").html(data);
        }
    })        
    return false;
}); 
</script>

Answer 1

您需要绑定选择元素上的change事件，而不是表单上的click事件。

$(".select-local, .select-precio").change(function() {
  $.ajax({
      type: "POST",
      url: $(".form_visitar").attr("action"),
      data: $(".form_visitar").serialize(),
      success: function(data) {
          $("#result").html(data);
      }
  });
});

这会将change处理程序绑定到具有类名select和select-local的{{1}}元素。如果您只想定位特定的选择，只需更改选择器：

select-precio

如果您只发送select的值，则可能不需要序列化整个表单。你可以这样做：

$(".select-precio").change(function() {
   ...
});

Answer 2

使用

<script type="text/javascript">
    $(".select-precio").change(function() {
    var form = $("#form");
    $.ajax({
        type: "POST",
        url: form.attr('action'),
        data: form.serialize(),
        success: function(data) {
            $("#result").html(data);
        }
    })        
    return false;
}); 
</script>

从变更选择中获取价值

2 个答案: