html select 刷新后保留选中值 一种处理方法

吐槽一下,百度了好多种这个方法,但发现大多数人的博客都是复制转载,或者写的不详细。

我的这个答案也并非原创,来自于

https://stackoverflow.com/questions/13183764/keep-selected-option-form-select-after-refresh

并且自己亲自尝试过,

<select id="ctc" οnchange="changeProgram()">
     {% for ctc in CTCs %}
     <option value="{{ctc}}">{{ctc}}</option>
     {% end %}
</select>
        $(function() {
            if (localStorage.getItem('ctc')) {
                $("#ctc option").eq(localStorage.getItem('ctc')).prop('selected', true);
            }

            $("#ctc").on('change', function() {
                localStorage.setItem('ctc', $('option:selected', this).index());
            });
        });

试验结果是可以的,就放一个下拉框吧: 

比较懒的同学可以把 我代码里的“ctc”换成你们自己的select id,  就这样子,很简单。


  • 5
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
你的问题描述有些含糊,但我理解你的意思是:在 Vue.js 中,使用路由传递 ID,在页面刷新后,Vue Select 组件只能显示数字,而不是对应的中文。 这个问题的原因可能是因为,在页面刷新后,Vue 组件会重新渲染,但是没有保存之前的状态。因此,你需要在 Vue 组件中保存之前的状态,以便在页面刷新后恢复。 具体实现方式有多种,以下是其中一种可能的方案: 1. 在组件的 data 中添加一个 selected 属性,用于保存当前选中的选项。 2. 在组件的 created 钩子中,检查路由参数是否包含一个名为 id 的参数。如果有,将其保存selected 属性中。 3. 在组件的 mounted 钩子中,使用 selected 属性初始化 Vue Select 组件的 v-model。 4. 在组件的 watch 钩子中,监听路由参数的变化。如果路由参数发生变化,将新的 id 保存selected 属性中,并重新加载对应的选项。 下面是一个示例代码: ``` <template> <div> <select v-model="selected"> <option v-for="option in options" :value="option.value">{{ option.label }}</option> </select> </div> </template> <script> export default { data() { return { selected: null, options: [ { value: 1, label: '选项一' }, { value: 2, label: '选项二' }, { value: 3, label: '选项三' }, ], }; }, created() { if (this.$route.params.id) { this.selected = parseInt(this.$route.params.id, 10); } }, mounted() { if (this.selected) { this.$refs.select.value = this.selected; } }, watch: { '$route.params.id'(newValue) { if (newValue) { this.selected = parseInt(newValue, 10); this.$refs.select.value = this.selected; } }, }, }; </script> ``` 在上面的代码中,我们通过使用 watch 监听路由参数的变化,以及在 created 和 mounted 钩子中保存和初始化选中的选项,来解决了 Vue Select 组件在页面刷新后只显示数字的问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值