使用AJAX和jQuery自动选择下拉列表

Question

我有3个下拉列表。 1）类型 2）持续时间 3）类

<select name="passenger_type_of_pass" class="pass"> 
    <option value="">- - Type - -</option> 
    <? 
     $result_type_of_pass = myquery($type_of_pass);           
     while($row = mysql_fetch_array($result_type_of_pass)) 
     { 
      echo "<option value=\"" . $row['product_name'] . "\">" . $row['product_name'] . "</option>"; 
     } 
    ?> 
</select> 

<select name="passenger_duration" class="duration"> 
    <option>--Duration--</option> 
</select> 

<select name="passenger_class" class="class"> 
    <option>--Class--</option> 
</select> 

使用jQuery，我作为有在每个选择框改变他们更新。

 $(".pass").change(function() 
     { 
      var pass=$(this).val(); 
      var dataString = 'pass='+ pass; 

      $.ajax 
      ({ 
       type: "GET", 
       url: "duration.php", 
       data: dataString, 
       cache: false, 
       success: function(html) 
       { 
        $(".duration").html(html); 
       } 
      }); 

     }); 

     $(".duration").change(function() 
     { 
      var duration=$(this).val(); 
      var pass=$(".pass").val(); 
      var dataString = 'pass='+ pass + '&duration=' + duration; 

      $.ajax 
      ({ 
       type: "GET", 
       url: "class.php", 
       data: dataString, 
       cache: false, 
       success: function(html) 
       { 
        $(".class").html(html); 
       } 
      }); 

     }); 

我想以这样的方式，一旦我选择“type_of_pass”，“持续时间”下拉列表中被填充，也顶端的选项被选中来改变这种代码！ 使用此自动选择的持续时间，用于搜索类的jQuery将运行，并会使用选定的顶层选项进行填充。

目前与我的代码，我不得不改变持续时间来获得类填充。

感谢

Answer 1

触发更改事件后填充它们像

$('.duration').change(): 

CODE：

$.ajax({ 
    type: "GET", 
    url: "duration.php", 
    data: dataString, 
    cache: false, 
    success: function(html) { 
     $(".duration").html(html); 
     $(".duration").change(); // here to trigger a change 
    } 
}); 

要设置任何具体的选项，你可以做

$('.duration option:eq(1)').prop('selected', true); // here I set the second option 

DEMO