每次更改选择框时，使用ajax发送http请求 [英] sending http request with ajax each time select box is changed

问题描述

我正在使用jquery从mysql获取数据.它的工作原理很棒，但是当另一个选择框更改时，我需要它来更新一个选择框.这是我的jquery:

Hi I am using jquery to get data from mysql. It works wonderfully but I need it to update a select box when another select box is changed. Here is what I have for jquery:

$("#airports").live('change',function() 
  {
      var selectVal = $('#airports :selected').val();
      alert(selectVal);

    Send a http request with AJAX 

    $.ajax({                                      
      url: 'tras-hotels.php',                         
      data: "n="+selectVal,                                                     
      dataType: 'json',                
      success: function(data)         
      {
         $.each(data, function(key,value){
                   $('#output').append("<option value='"+value.id+"'>"+value.hotel+"</option>");
                });

      } 
    });

  }); 

因此，我在这里所做的是每次#airports select更改时都会更新选择框#output.它仅在第一次更改时起作用，然后不再执行.但是更改后，我的警报确实具有正确的值.这是我的选择框:

So what I am doing here is updating the select box #output each time #airports select is changed. It only works the first time it is changed and then does not do it again. But I do get the alert with the correct value when changed. Here are my select boxes:

<select name="airport" style="width: 220px;" id="airports">
            <option selected="selected">[Escoge Aeropuerto]</option>
            <?php 
            while($tra = mysql_fetch_array($getAirports)){
                echo '<option value="'.$tra['taeropuerto_fklocacion'].'">'.$tra['taeropuerto_nombre'].'</option>';
                } 
            ?>
            </select>
            <label>Hotel</label>
            <select name="hotel" id="output" style="width: 220px;">

            </select>

有人知道为什么这行不通吗?有解决方案吗?预先感谢您的帮助.

Does anyone know why this is not working? Is there a solution? Thank you in advance for any help.

推荐答案

我不确定您为什么使用live-有时也会通过AJAX替换原始选择吗?但是，可能只需要先清除原始值，因为您只是追加新的值.

I'm not sure why you are using live - is the original select sometimes replaced via AJAX as well? It may be, however, that you simply need to clear the original values first since you are only appending the new ones.

$("#airports").live('change',function() 
{
    var selectVal = $('#airports :selected').val();
    alert(selectVal);

    var $output = $('#output').html('');

    $.ajax({                                      
      url: 'tras-hotels.php',                         
      data: "n="+selectVal,                                                     
      dataType: 'json',                
      success: function(data)         
      {
         $.each(data, function(key,value) {
              $output.append("<option value='"+value.id+"'>"+value.hotel+"</option>");
         });
      } 
    });

});

这篇关于每次更改选择框时，使用ajax发送http请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！