ajax提交请求后，select标签内的option回到默认选项

JavaScript / 2021年8月3日 / hamster

在提交表单数据时，我们经常会用到选择框提交数据，如果我们使用Ajax向后台传值，并期望传值成功后不刷新页面，继续提交新的数据时，该如何让选择框回到之前默认的状态。

先看示例

<select>
    <option>请选择</option>
    <option>PHP</option>
    <option>JavaScript</option>
    <option>HTML+CSS</option>
    <option>Python</option>
</select>
<button>提交</button>

未提交前的页面效果

在选择框选定数据后，点击提交，数据传值后台，页面效果如下

我希望在点击提交后，选择框重新恢复到默认状态，于是我添加如下代码

<script>
    $(function () {
        $("button").click(function () {
            $("select > option:first-child").attr("selected","selected");
            $("select > option:first-child").attr("disabled","disabled");
        })
    })
</script>

测试，在选定数据后，点击提交，数据传值后台，选择框也恢复到默认状态。

可当我再次点击提交时，选择框并没有恢复到默认状态。

最终解决方案

<script>
    $(function () {
        $("button").click(function () {
            var html = $("select").html();
            $("select").html(html);
        })
    })
</script>

测试达到所需效果

如果是多个选择框需要重置，可以如下操作

$(".reset").click(function () {
    $("input").val("");

    $("select").each(function () {
       var htmls = $(this).html();
       $(this).html(htmls);
    });
})

最新解决办法

#不用上述那么麻烦，将attr换做prop即可
$("select option:first-child").prop("selected",true);

Jquery