大佬们,和产品经理沟通过后,他也接受了另外一种交互效果,实现起来可能更简单一点。就是点击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 ,现在这样搞也支持了,大佬们牛逼!这种套路咱是想破脑袋也想不到(跪了 |