重置按钮不会重置选择元素答案

【问题标题】：Reset Button does not reset select element重置按钮不会重置选择元素
【发布时间】：2016-07-27 08:30:10
【问题描述】：

我使用引导程序和 html 重置创建了一个重置按钮。它适用于 IE，但不适用于 Chrome 和 Firefox。

由于某种原因，当我重置表单时，表单中的其余字段会针对所有三个浏览器进行重置。但是，与完全重置表单的 IE 不同，有一个显示里程的特定字段。

在 Chrome 和 Firefox 中，它不会显示空白英里，而是转到最后一个选项，即 20 英里。

我不明白它为什么会这样。任何帮助将不胜感激

<div class="form-group">
    <div class="input-group">
        <select class="form-control" name="distance" ng-model="searchParam.distance">
            <option selected="selected" value=" "></option>
            <option selected="selected">5</option>
            <option selected="selected">10</option>
            <option selected="selected">15</option>
            <option selected="selected">20</option>
        </select>
    
        <div class="input-group-addon">mi</div>
    </div>
</div>

<!---The reset button --->

<div class="form-group">
    <input class="btn btn-primary btn-block" type="reset" value="Reset" />    
</div>

【问题讨论】：

标签： html forms twitter-bootstrap

【解决方案1】：

仅将selected="selected" 与默认option 一起使用：

<select class="form-control" name="distance" ng-model="searchParam.distance">
    <option selected="selected"></option>
    <option>5</option>
    <option>10</option>
    <option>15</option>
    <option>20</option>
</select>

<form>
    <div class="form-group">
        <div class="input-group">
            <select class="form-control" name="distance" ng-model="searchParam.distance">
                <option selected="selected"></option>
                <option>5</option>
                <option>10</option>
                <option>15</option>
                <option>20</option>
            </select>

            <div class="input-group-addon">mi</div>
        </div>
    </div>

    <!---The reset button --->

    <div class="form-group">
        <input class="btn btn-primary btn-block" type="reset" value="Reset" />
    </div>
</form>

见JSFiddle

【讨论】：