V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
einq7
V2EX  ›  问与答

请教一个问题,前端大佬们进!

  •  
  •   einq7 · 2022-01-16 19:27:48 +08:00 · 1972 次点击
    这是一个创建于 1027 天前的主题,其中的信息可能已经有所发展或是发生改变。

    请教下各位前端大佬,在移动端下,原生 select 控件首次打开下拉框时,如何默认定位到一个指定 option ?因为目标用户是中老年人群体,所以在注册页选择出生年份时,产品经理希望首次选择时能从一个比较靠近的年份开始,比如 1980 年,帮用户省些事。

    可能我的文字描述的会有些不清楚,我用 pr 剪出了一个 gif ,期望的效果可以参考下面这张 gif(注意不是选中该 option ,select 框中的值并没有改变)

    2022 年 01 月 16 日 18:31:52

    貌似 select 控件本身并没有提供这样一个 api ,所以过来求助下各位大佬。我搞了个 codesandbox ,大佬们可以直接在上面改改看。

    Edit on CodeSandbox

    第 1 条附言  ·  2022-01-16 23:05:07 +08:00

    大佬们,和产品经理沟通过后,他也接受了另外一种交互效果,实现起来可能更简单一点。就是点击select后,控件直接选中1980年这个option,就是下面gif图的效果。

    产品同意的交互效果

    看上去不难,也就是在onClick的时候,判断该字段之前有没有值,没有就设置表单里select控件对应的字段birthYear值为1980,就加了下面几行代码。

    修改的代码

    修改后现在初次点击select控件中的值是成功变为了1980,但是弹出来的选择框里还是停留在第一个选项"请选择你的出生年份"(如下面gif所示)。感觉我添加的逻辑似乎没毛病啊,这个问题又是什么引起的呢?求大佬解答!

    这是修改后的codesandbox

    Edit on CodeSandbox

    这是修改后出现问题时录制的gif

    修改后出现的问题

    17 条回复    2022-01-17 15:06:55 +08:00
    slmaaw
        1
    slmaaw  
       2022-01-16 19:32:41 +08:00 via Android
    <option key={year} selected={year===1980}>{year}</option>
    einq7
        2
    einq7  
    OP
       2022-01-16 19:46:20 +08:00
    @slmaaw #1 感谢回复,但是这样初始就选中了 1980 这个选项了,我希望的是首次打开下拉框时,停留在 1980 这个选项,并不选中它,select 控件中显示的还是"请选择出生年份"这个选项,效果可以参考帖子正文中那个 gif 图
    hronro
        3
    hronro  
       2022-01-16 19:47:59 +08:00 via iPhone
    @einq7 #2 那你自己实现一个 Select 控件吧,原生的没这功能
    Elix
        4
    Elix  
       2022-01-16 20:07:17 +08:00   ❤️ 1
    "因为目标用户是中老年人群体",........从一个比较靠近的年份开始,比如 1980 年
    70 后有觉得被冒犯到 {doge}
    EPr2hh6LADQWqRVH
        5
    EPr2hh6LADQWqRVH  
       2022-01-16 20:08:29 +08:00   ❤️ 3
    两个 select ,展示一个动作一个,展示的那个 onclick 拦截,给动作的那个 click(), 动作的那个 change 的时候把值赋给展示的那个,最后用展示的那个。

    这个套路会了吗
    learnshare
        6
    learnshare  
       2022-01-16 20:20:45 +08:00
    点击的时候,判断有没有值,没有就设置默认值
    retrocode
        7
    retrocode  
       2022-01-16 20:23:12 +08:00
    5 楼的方法可靠
    rabbbit
        8
    rabbbit  
       2022-01-16 21:15:10 +08:00
    原生的 select 不能被 click 触发吧,是我记错了,还是又改了?
    rabbbit
        9
    rabbbit  
       2022-01-16 21:30:06 +08:00
    写了个 demo 试了下, android chrome 不行, ios 14 safari 可以
    v3xe
        10
    v3xe  
       2022-01-16 21:56:11 +08:00 via iPhone
    我是第十个大佬。
    einq7
        11
    einq7  
    OP
       2022-01-16 23:08:31 +08:00
    @learnshare #6 大佬我准备换成你说的这种交互方式,改了以后,select 框中的值确实设置正确了,但是点击后弹出的选择框还是停留在第一个选项"请选择你的出生年份",而不是我设置的"1980",请问这是什么原因导致的问题?具体你可以看下我主题正文下 append 的内容。
    einq7
        12
    einq7  
    OP
       2022-01-16 23:09:16 +08:00
    @rabbbit #9 大佬,可以贴下你的 demo 代码参考一下吗
    gouflv
        13
    gouflv  
       2022-01-17 01:14:59 +08:00 via iPhone   ❤️ 1
    select 全透明盖在文字上:
    1.点击由 select 处理
    2.文字内容完全可控
    coolan
        14
    coolan  
       2022-01-17 01:32:54 +08:00
    @gouflv 这应该是唯一答案。
    TomVista
        15
    TomVista  
       2022-01-17 09:41:00 +08:00   ❤️ 1
    一个 select 一个 input 联动,

    select 默认 1980, input 默认请选择生日

    select onclose onchange 联动 input
    learnshare
        16
    learnshare  
       2022-01-17 09:50:10 +08:00
    @einq7 试试在合适的时候给 option 添加 selected 属性
    einq7
        17
    einq7  
    OP
       2022-01-17 15:06:55 +08:00
    @avastms @gouflv @TomVista @learnshare

    感谢各位我整出来了。几位大佬说的应该是同一个思路,input 用来展示,select 全透明放置在 input 上方,点击选择后切换 input 里的值,完全符合需求,甚至之前 select 不支持 placeholder ,现在这样搞也支持了,大佬们牛逼!这种套路咱是想破脑袋也想不到(跪了



    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2919 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 02:42 · PVG 10:42 · LAX 18:42 · JFK 21:42
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.