如何使用依赖下拉列表在ajax中发送数据 [英] How to send data in ajax with dependent drop-down

问题描述

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

I Have already set the first value from the first combo-box now i need to send the second variable from second combo-box and receive it in the same php file here is the 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组合框：

Here is the first html combo-box this is functioning perfectly:

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

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

Here is the second html combo-box that i want to get the value from and send it to the same php file as the first:

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>

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

Any help would be appreciated, Thank you!

推荐答案

向ajax发送多个值使用对象

Send multiple values to ajax use object

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

在您的情况下，您应该使用表单

In your case, you should use form

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

JavaScript代码。

JavaScript code.

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

编辑：根据评论

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函数并填充您的drop- $ / b
$ b

On each select change method you can call this ajax function and populate your drop-down.

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

这篇关于如何使用依赖下拉列表在ajax中发送数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！