jquery - Ajax 请求后选择选项未重置

Question

我有一个表格，其中有标题、选择选项和内容。我正在做的是我正在获取所有数据并通过 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 中Select Post Category。当我重置它时，我想在 ajax 请求之后显示相同的内容。但是，我发现其中的困难。怎么了，我无法得到它。

标签： jquery

Answer 1

我给你一个接近你目标的例子。文档加载时，1 secondselect 变为 后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>