javascript - 如果选择快速，Ajax 不会填充下拉列表

Question

我正在尝试创建一个包含两个下拉列表的过滤器，一个包含节目，另一个包含它们的位置。当在第一个下拉列表中选择一个节目时，第二个下拉列表中的位置列表将被修改为仅包含播放该特定节目的位置。现在我遇到的问题是，如果用户在选择节目后快速单击位置下拉菜单，它有时只会在用户做出选择修改列表并因此删除他们的选择后更新(这经常发生在边缘)。有没有办法更快地更新位置下拉列表中的列表？或者至少强制它更新，即使它被选中？

这是我正在使用的 JavaScript，它使用了我已添加到 Wordpress 中的 functions.php 中的“example_ajax_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);
            }
        });

    });

我的函数获取位置(省)列表

 function example_ajax_request() {

    $arrayList = array();
    $arrayList[] = "Choose a province";

    $selected = $_POST['show'];

    if( $selected == "Choose a show" )
        $selected = "";

    $arg = array(
        'posts_per_page' => -1,
        'post_type' => 'address',
        'meta_key' => 'show',
        'meta_value' => $selected,
    );

    $the_query = new WP_Query( $arg );

    if( $the_query->have_posts() )
    {
        while ( $the_query->have_posts() )
        {
            $the_query->the_post();
            $arrayList = get_option_list('province', $arrayList);
        }
    }
    print json_encode($arrayList);
    wp_reset_query();

    die();
    }

    add_action( 'wp_ajax_example_ajax_request', 'example_ajax_request' );
    add_action( 'wp_ajax_nopriv_example_ajax_request', 'example_ajax_request' );

这些是下拉菜单和它们的查询

    <?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'];
?>

Answer 1

在您输入#select_show 选择

的更改事件时添加此内容

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

这将禁用选择，这意味着用户将无法手动单击它(这对 javascript hacks 开放，tho)。然后，当您确定已获取所有位置时，只需将其转回 false

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

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

请注意，可能有很多其他方法可以解决该问题，但我首先想到的是这种方法!