这是一个创建于 824 天前的主题，其中的信息可能已经有所发展或是发生改变。
请教下各位前端大佬，在移动端下，原生 select 控件首次打开下拉框时，如何默认定位到一个指定 option ？因为目标用户是中老年人群体，所以在注册页选择出生年份时，产品经理希望首次选择时能从一个比较靠近的年份开始，比如 1980 年，帮用户省些事。
可能我的文字描述的会有些不清楚，我用 pr 剪出了一个 gif ，期望的效果可以参考下面这张 gif(注意不是选中该 option ，select 框中的值并没有改变)
貌似 select 控件本身并没有提供这样一个 api ，所以过来求助下各位大佬。我搞了个 codesandbox ，大佬们可以直接在上面改改看。
第 1 条附言 · 2022-01-16 23:05:07 +08:00
大佬们，和产品经理沟通过后，他也接受了另外一种交互效果，实现起来可能更简单一点。就是点击select后，控件直接选中1980年这个option，就是下面gif图的效果。
看上去不难，也就是在onClick的时候，判断该字段之前有没有值，没有就设置表单里select控件对应的字段birthYear值为1980，就加了下面几行代码。
修改后现在初次点击select控件中的值是成功变为了1980，但是弹出来的选择框里还是停留在第一个选项"请选择你的出生年份"(如下面gif所示)。感觉我添加的逻辑似乎没毛病啊，这个问题又是什么引起的呢？求大佬解答！
这是修改后的codesandbox
这是修改后出现问题时录制的gif
 |
1
slmaaw 2022-01-16 19:32:41 +08:00 via Android
<option key={year} selected={year===1980}>{year}</option>
|
 |
2
einq7 OP @slmaaw #1 感谢回复，但是这样初始就选中了 1980 这个选项了，我希望的是首次打开下拉框时，停留在 1980 这个选项，并不选中它，select 控件中显示的还是"请选择出生年份"这个选项，效果可以参考帖子正文中那个 gif 图
|
 |
4
Elix 2022-01-16 20:07:17 +08:00  1
"因为目标用户是中老年人群体"，........从一个比较靠近的年份开始，比如 1980 年
70 后有觉得被冒犯到 {doge} |
 |
5
EPr2hh6LADQWqRVH 2022-01-16 20:08:29 +08:00 3
两个 select ，展示一个动作一个，展示的那个 onclick 拦截，给动作的那个 click(), 动作的那个 change 的时候把值赋给展示的那个，最后用展示的那个。
这个套路会了吗 |
 |
6
learnshare 2022-01-16 20:20:45 +08:00
点击的时候，判断有没有值，没有就设置默认值
|
 |
7
retrocode 2022-01-16 20:23:12 +08:00
5 楼的方法可靠
|
 |
8
rabbbit 2022-01-16 21:15:10 +08:00
原生的 select 不能被 click 触发吧,是我记错了,还是又改了?
|
|
9
rabbbit 2022-01-16 21:30:06 +08:00
写了个 demo 试了下, android chrome 不行, ios 14 safari 可以
|
 |
10
v3xe 2022-01-16 21:56:11 +08:00 via iPhone
我是第十个大佬。
|
|
11
einq7 OP @learnshare #6 大佬我准备换成你说的这种交互方式，改了以后，select 框中的值确实设置正确了，但是点击后弹出的选择框还是停留在第一个选项"请选择你的出生年份"，而不是我设置的"1980"，请问这是什么原因导致的问题？具体你可以看下我主题正文下 append 的内容。
|
 |
13
gouflv 2022-01-17 01:14:59 +08:00 via iPhone 1
select 全透明盖在文字上：
1.点击由 select 处理 2.文字内容完全可控 |
 |
15
TomVista 2022-01-17 09:41:00 +08:00 1
一个 select 一个 input 联动,
select 默认 1980, input 默认请选择生日 select onclose onchange 联动 input |
|
16
learnshare 2022-01-17 09:50:10 +08:00
@einq7 试试在合适的时候给 option 添加 selected 属性
|
|
17
einq7 OP @avastms @gouflv @TomVista @learnshare
感谢各位我整出来了。几位大佬说的应该是同一个思路，input 用来展示，select 全透明放置在 input 上方，点击选择后切换 input 里的值，完全符合需求，甚至之前 select 不支持 placeholder ，现在这样搞也支持了，大佬们牛逼！这种套路咱是想破脑袋也想不到（跪了   |
Select Language