如何使用依赖下拉列表在ajax中发送数据

Question

我已经从第一个组合框设置了第一个值，现在我需要从第二个组合框发送第二个变量并在同一个 php 文件中接收它，这里是 Ajax：

$(document).ready(function(){
   $(".rutas").change(function(){
     var id=$(this).val();
     var dataString = 'id='+ id;
     $.ajax({
       type: "POST",
       url: "asientos.php",
       data: dataString,
       cache: false,
       success: function(html){
          $(".asientos").html(html);}  
       }); 
   }); 
});
</script>

这是第一个运行良好的 html 组合框：

<select name="rutas" class="rutas" >
   <option value="">Seleccione Ruta</option>;
   <?php   include 'rutas.php';   ?>
</select>

这是我想从中获取值并将其发送到与第一个相同的 php 文件的第二个 html 组合框：

Clase: <select name="clase" class="clase">
   <option value="A">Clase Ejecutiva</option>;
   <option value="B">Clase Media</option>;
   <option value="C">Clase Economico</option>;
</select>

任何帮助将不胜感激，谢谢！

Answer 1

发送多个值到ajax使用object

var data = {field1: "value1", field2: "value2"};

在你的情况下，你应该使用form

<form id="myForm">
<select id="select1"></select>
<select id="select2"></select>
</form>

JavaScript 代码。

$(document).ready(function(){
  $('#myForm').submit(function(event){
     event.preventDefault();
     var data = {field1: $("#select1").val(), field2: $("#select2").val()};

     //Ajax code should be here
     $.ajax({
         type: "POST",
         url: "asientos.php",
         data: data,
         cache: false,
         success: function(html){
            $(".asientos").html(html);}  
         }); 
     }); 
   });
});

编辑：根据 cmets

function ajaxCall(url, data){

     //Ajax code should be here
     $.ajax({
         type: "POST",
         url: url,
         data: data,
         cache: false,
         success: function(html){
            $(".asientos").html(html);}  
         }); 
     }); 
}

在每个选择更改方法上，您都可以调用此 ajax 函数并填充您的下拉列表。

$(".rutas").change(function(){
    ajaxCall('demo.php', '10');
});