プルダウン(select)未選択時、リスト中ごろから表示

Question

プルダウン（select）で生年月日の年を選択させる部分を作る場合なのですが、

<select name="year">
<option value="">選択してください</option>
<option value="2000">2000年</option>
<option value="1999">1999年</option>
<option value="1998">1998年</option>
<option value="1997">1997年</option>
<option value="1996">1996年</option>
<option value="1995">1995年</option>
</select>

としますと、当然画面表示時には、「選択してください」が選ばれていて、
プルダウンをクリックすると、optionのリストが上から順番に表示されます。

たまに、
プルダウンをクリックすると
2000年
1999年
1998年
-----1997年-----
1997年
1996年
1995年
というようなリストで
-----1997年-----（リストの中ごろ）から上下に動かせるようなプルダウンがありますが、
これはどのようにすれば実現できますでしょうか。

Comments

[m.ts10806]

「ごろ」ってなんでしょう。法則や仕様を考えてください。（作る人のすることです）

[norihiko]

ご質問、ありがとうございます。
通常プルダウンをクリックするとselectedがない場合一番上のoptionが選ばれている状態ですが、
このoptionが例えば100個とかあった場合
クリックして、optionのリストが100個出てきて一番下の方までいくのが大変なので、
<option value="2000">2000年</option>
～
<option value="1900">1900年</option>
がoptionにあった場合、
プルダウンをクリックすると、1950年のところが選ばれているようになっていて、
上下どちらにもいきやすいようにしたいと考えております。

あらかじめ、<option value="1950" selected>1950年</option>
としてしまうと、ユーザーが1950年を選択していないのに、1950年が選ばれた状態になってしまうので、
あくまでも初期値は空で、プルダウンをクリックしたら、optionの1950年が選ばれた状態で
上下にいきやすくしたいというようにしたいと思っております。

よろしくお願いいたします。

Answer 1

こういう感じでしょうか？ Chrome と Firefox で確認。
どうにもアドホックな感じで気持ち悪いですが……

サンプル

<select name="year">
<option value="2000">2000年</option>
<option value="1999">1999年</option>
<option value="1998">1998年</option>
<option value="1997">1997年</option>
<option value="" selected id="select">選択してください</option>
<option value="1996">1996年</option>
<option value="1995">1995年</option>
</select>

document.querySelector('select').addEventListener('click',e=>{e.target.prepend(document.getElementById('select'))});

Comments

[norihiko]

素晴らしい解決策ありがとうございました！

Answer 2

こういうことではないのでしょうか。

<select name="year">
<option value="">選択してください</option>
<option value="2000">2000年</option>
<option value="1999">1999年</option>
<option value="1998">1998年</option>
<option value="1997" selected>1997年</option>
<option value="1996">1996年</option>
<option value="1995">1995年</option>
</select>
```**動くサンプル：**[https://jsfiddle.net/h9ouvm8z/](https://jsfiddle.net/h9ouvm8z/)

---

【<option> - HTML: HyperText Markup Language | MDN】
[https://developer.mozilla.org/ja/docs/Web/HTML/Element/option#Attributes](https://developer.mozilla.org/ja/docs/Web/HTML/Element/option#Attributes)

Comments

[norihiko]

早速、ありがとうございます。
こちらですと、初期値で1997年が選択されてしまっていると思います。
ユーザーがこの項目を触らなくても、1997年がsubmitされてしまうと思います。

あらかじめ、1997年がselectedされているのではなく、
プルダウンが未選択時にクリックすると、
選択肢の中ごろから開始され、上下に動けるようになっているサイトを
何度か見たことがあり、そのようにしたいと思っております。
ユーザーが未選択の場合は、1997がsubmitされるのではなく、
空がsubmitされるようになればと思っております。

よろしくお願いいたします。

[kei344]

見たものを思い出して、それを提示されたほうが良いです。