jquery - 从更改时的选择中获取值(value)

Question

我有以下表单，有 2 个选择:

<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 函数(现在的 selects.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

您需要绑定(bind)到 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);
      }
  });
});

这将绑定(bind) change select 的处理程序具有类名的元素 select-local和select-precio 。如果您只想针对特定选择，只需更改选择器即可:

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

如果您只发送选择的值，那么您可能不需要序列化整个表单。你可以这样做:

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