Javascript 如果选择“快速”，则Ajax不流行下拉列表

我正在尝试创建一个包含两个下拉列表的过滤器，一个包含节目，另一个包含位置。当在第一个下拉列表中选择某个节目时，第二个下拉列表中的位置列表将被修改为仅包含播放该特定节目的位置。现在我遇到的问题是，如果用户在选择一个节目后单击“位置”下拉列表以快速显示，它有时仅在用户选择修改列表并删除其选择后才会更新（这通常发生在edge中）。有没有办法更快地更新“位置”下拉列表中的列表？或者至少强制它更新，即使它已被选中

这是我正在使用的JavaScript，它使用了我在Wordpress中添加到functions.php的“example\u ajax\u request”函数，您可以在脚本下面看到它

 $('#select_show').change( function(){
        var show = $("#select_show :selected").text();

        $.ajax({
            type: "post",
            url: ajaxurl,
            data: {
                'action':'example_ajax_request',
                'show' : show
            },
            dataType:"json",
            success:function(data) {
                console.log("what is happening al of a sudden");
                console.log(data);
                $('#province').children('option').remove();

                for(var i = 0; i < data.length; i++)
                {
                    if( data[i] == 'Choose a province')
                        var value = "all";
                    else
                        var value = data[i];

                    $('#province').append( $("<option value=" + value +"></option>").text(data[i]) );
                }

            },
            error: function(errorThrown){
                console.log(errorThrown);
            }
        });

    });

这些是下拉列表和它们的查询

    <?php
     $arg = array(

    'post_type' => 'address',
    'posts_per_page' => -1,
    'meta_key' => 'show',
    'meta_value' => ''
     );

     $the_query = new WP_Query( $arg );

     $showlist = array();

     if( $the_query->have_posts() )
     {
     while ( $the_query->have_posts() )
     {
        $the_query->the_post();
        $showlist = get_option_list('show', $showlist);
     }
     }


     $arg = array(


    'post_type' => 'address',
    'posts_per_page' => -1,
    'meta_key' => 'show',
    'meta_value' => '',
     );

     $the_query = new WP_Query( $arg );

     $provincelist = array();

     if( $the_query->have_posts() )
     {
     while ( $the_query->have_posts() )
    {
        $the_query->the_post();
        $provincelist = get_option_list('province', $provincelist);
    }
    }

    ?>

    <div class="block-go-to">
    <form action="reserve-tickets" method="get">
      <select id="select_show" name="show">
          <option value="all">Choose a show</option>
            <?php
                foreach($showlist as $show)
                {
                    ?>
                    <option value="<?php echo $show; ?>">
                        <?php echo $show; ?>
                    </option>
                <?php
                }
            ?>
        </select>

        <select id="province" name="province">
            <option value="all">Choose a province</option>
            <?php
            foreach($provincelist as $province)
            {
                ?>
                <option value="<?php echo $province; ?>">
                    <?php echo $province; ?>
                </option>
            <?php
            }
            ?>
        </select>

        <button id="show_map" class="cta right">Show map</button>
    </form>
</div>

<?php
session_start();
if(isset($_POST['province']))
    $_SESSION['province'] = $_POST['province'];
?>

选秀
在您输入
#select_show
select的更改事件时添加此项

$('#province').attr('disabled', true);

这将禁用select，意味着用户将无法手动单击它（这对javascript黑客是开放的，tho）。
然后，当您确定所有位置都已获取时，只需将其返回false即可

$('#province').attr('disabled', false);

这当然会重新启用输入，让用户使用它

请注意，可能还有很多其他的方法来解决这个问题，但这只是我想到的第一个方法
 您可以通过在获取位置时禁用下拉菜单来解决此问题。例如，如果用户在ajax请求响应之前选择快速的位置，则不需要任何努力就无法维护用户的选择。你可以做的是禁用位置下拉列表，直到它得到更新，然后再次启用它以允许用户选择。这也是我要做的，尽管我建议只是为了清楚起见，在你的答案中添加它的作用以及它如何解决问题。谢谢，这就是我所做的。虽然我不得不用。道具让它工作。
$('#province').attr('disabled', false);