Ajax请求选择后选项未重置

时间:2018-11-10 23:08:56

标签: jquery

我有一个表格,其中有标题,选择选项和内容。我正在做的是获取所有数据,并通过ajax将其发送到服务器,我能够重置输入字段,但无法重置选择选项框。

以下是我的选择框代码:

<select name="post_category" class="post_category round select2 form-control" id="id_h5_single">
    <option selected disabled value="">Select Post Category</option>
    <option value="Am">America</option>
    <option value="Nt">Netherland</option>
</select>

以下是我用来重置上述字段的jQuery代码:

// $('.post_category').prop('selectedIndex',-1);
// $('.post_category').val($(this).find('option:first').val());
// $("select.post_category option:selected").attr('disabled','disabled');
// $("select").val("");
$('.post_category').prop('selectedIndex',0);

注释的代码是我使用过的代码。我想做的是,页面默认加载时显示在选择Select Post Category中。我想在重设ajax请求后显示相同的内容。但是,我发现有困难。怎么了,我没办法。

1 个答案:

答案 0 :(得分:1)

我为您提供一个接近您目标的示例。加载文档后,在1 second之后,选择将更改为America,稍后4 seconds将再次更改为默认值。

$(document).ready(function()
{
    $(".select2").select2();
    
    setTimeout(
        function(){$("#id_h5_single").val("Am").change();},
        1000
    );
    
    setTimeout(
        function(){$("#id_h5_single").val("").change();},
       5000
    );
});
.select2{
  width: 50vw;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>

<select name="post_category" class="post_category round select2 form-control" id="id_h5_single">
    <option selected disabled value="">Select Post Category</option>
    <option value="Am">America</option>
    <option value="Nt">Netherland</option>
</select>

但是,由于您使用的是 select2插件,因此,实现所需的最佳方法是使用占位符,而不是默认的禁用选项。您可以在下一个示例中进行检查:

$(document).ready(function()
{
    $(".select2").select2({
        placeholder: "Select Post Category",
        allowClear: true
    });
    
    setTimeout(
        function(){$("#id_h5_single").val("Am").change();},
        1000
    );
    
    setTimeout(
        function(){$("#id_h5_single").val("").change();},
       5000
    );
});
.select2{
  width: 50vw;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>

<select name="post_category" class="post_category round select2 form-control" id="id_h5_single">
    <option value="Am">America</option>
    <option value="Nt">Netherland</option>
</select>