プレースホルダーとプルダウンの実装方法を教えていただきたいです。
プレースホルダーで「aaa」を設定。
プルダウンで
・空白
・りんご
・みかん
を設定。
プルダウンで空白を選択した場合に、
プレースホルダーで設定されている「aaa」
を消えないように実装したいです。

今はプルダウンで空白を選択した場合に
プレースホルダーで設定されている「aaa」が消えてしまいます。

ご回答よろしくお願いいたします。

hatena19

2021/02/17 13:47 編集

現状のコード(HTML, CSS, JavaScript) を提示してください。

行動規範の内容に同意します

回答1件

ベストアンサー

例1

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <style>
7        select:invalid {
8            color: gray;
9        }
10    </style>
11</head>
12<body>
13    <select name="fruit" required>
14        <option value="" disabled selected hidden>選んで!</option>
15        <option value="1">りんご</option>
16        <option value="2">みかん</option>
17        <option value="3">バナナ</option>
18    </select>
19</body>
20</html>

↑この場合、プルダウンを開いたとき、選択肢は3つしか見えません。一旦、どれかを選んでしまうと、もう未選択状態には戻せません。

「空行」も選択肢として出したいなら、しかもそれが選ばれたときにプレースホルダー的なテキストを出したいなら、JSで細工するしかないかなぁ…。
↓こんな感じでどうでしょう?

例2

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <style>
7        select:invalid {
8            color: gray;
9        }
10    </style>
11</head>
12<body>
13    <select id="fruit" name="fruit" required onchange="fruitChanged()">
14        <option value="ph" disabled selected hidden>選んで!</option>
15        <option value=""></option>
16        <option value="1">りんご</option>
17        <option value="2">みかん</option>
18        <option value="3">バナナ</option>
19    </select>
20
21    <script type="text/javascript">
22        function fruitChanged() {
23            let fruit = document.querySelector('#fruit');
24            if ( fruit.value === '' ) fruit.value = 'ph';
25        };
26    </script>
27</body>
28</html>