Question

您好我正在使用jquery从mysql获取数据。它运行得非常好，但我需要它在更改另一个选择框时更新选择框。以下是我对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。它仅在第一次更改时才起作用，然后不再执行。但是我确实在更改时获得了正确值的警报。这是我的选择框：

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

有谁知道为什么这不起作用？有解决方案吗？提前感谢您的帮助。

Answer 1

我不确定你为什么使用live - 原来的选择有时会被AJAX取代吗？但是，您可能只需首先清除原始值，因为您只是附加新值。

$("#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请求

1 个答案: