Блог

У меня есть следующая форма, в которой есть 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>
  

Вам нужно привязаться к change событию в элементах select, а не к 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 и select-precio . Если вы хотите просто настроить таргетинг на определенный select, просто измените селектор:

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

Если вы отправляете только значение select, то вам, вероятно, не нужно сериализовать всю форму. Вы могли бы сделать что-то вроде этого:

 $(".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);
      }
  });
});
  

использовать

 <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>