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

【问题标题】：Autoselect dropdown list using AJAX and jQuery使用 AJAX 和 jQuery 自动选择下拉列表
【发布时间】：2012-06-04 13:36:11
【问题描述】：

我有 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 运行并填充选择的顶部选项。

目前使用我的代码，我必须更改持续时间以填充类。

谢谢

【问题讨论】：

标签： php ajax jquery

【解决方案1】：

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

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

代码：

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

【讨论】：