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 Post Category中。我想在重设ajax请求后显示相同的内容。但是，我发现有困难。怎么了，我没办法。

Answer 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>

Ajax请求选择后选项未重置

1 个答案: