关于有时select下拉表单selected设置无效的解决方案

隔壁小王攻城狮

于 2016-10-26 10:48:16 发布

阅读量2.3w

点赞数 1

分类专栏： html奇葩问题

本文链接：https://blog.youkuaiyun.com/df981011512/article/details/52932198

版权

html奇葩问题专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个关于HTML中Select元素预选值在页面刷新后丢失的问题及其解决方法。通过添加autocomplete属性并设置为off，可以避免浏览器缓存导致的选择项未正确预选的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<select class="form-control" name="user_level" <strong><span style="color:#ff0000;">autocomplete="off"</span></strong>>
                                                        <option value="">--请选择--</option>
                                                        <if condition="$user_info['user_level'] eq '0'">
                                                            <option value="0" selected="selected">普通</option>
                                                        <else />
                                                            <option value="0">普通</option>
                                                        </if>
                                                        <if condition="$user_info['user_level'] eq '1'">
                                                            <option value="1" selected="selected">会员</option>
                                                        <else />
                                                            <option value="1">会员</option>
                                                        </if>
                                                        <if condition="$user_info['user_level'] eq '2'">
                                                            <option value="2" selected="selected">贵宾</option>
                                                        <else />
                                                            <option value="2">贵宾</option>
                                                        </if>
                                                    </select>

以上只是本人的一个案例(thinkphp模板引擎)

如果你懒的看上面的不要紧，下面我直接说吧

正常情况下我们都是这么写的

<select name="自定义名称">
	<option value="1">1</option>
	<option value="2" selected="selected"> 2</option>
	<option value="3">3</option>
</select>

按着上面的写法一般来说没什么问题，可是有时候可能是使用了前段框架的问题，导致红色项没有按我们预期的被选中，如果遇到这种情况我们可以进行如下标准写法就可以解决问题了

<select name="自定义名称" autocomplete="off"</span>>
	<option value="1">1</option>
	<option value="2" selected="selected"> 2</option>
	<option value="3">3</option>
</select>

加了autocomplete="off"后就任何问题都解决了

这个问题估计你在其它地方也会看到类似的解决方案，但是并没有给出为什么？

原因：是因为“例如火狐”为了提高浏览器性能，使用了缓存技术，就比如你的输入框双击后会出现之前的输入的内容一个道理，解决方法就是加 autocomplete="off"或者手动清除浏览器缓存，两种方法肯定推荐用前者

火狐官方论坛解释：http://stackoverflow.com/questions/6849057/firefox-5-not-using-select-selected-value-on-page-refresh-retaining-old-value

火狐5版本就有这个问题，4没发现，不排除其它浏览器也作了类似的处理，所以为了保险起见，最好都加上 autocomplete="off"

纯属个人亲身经历，如果能帮到你，欢迎给个赞，若有不妥之处请指出！