Получение значения из выбора при изменении

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

Необходимо связать с событием 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 и 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);
      }
  });
});

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>