プルダウン<select>の１番目の要素で表のヘッダを兼ねるようにしたい。

前提・実現したいこと

Web画面を作成しています。
以下のようなプルダウンを作りたいのですが、スマートな実装方法が分かりません。

プルダウンを表のヘッダ行に設置する
プルダウン１番目の選択肢が表のヘッダを兼ねるようにする

現状の実装（<option>の中身）

innerHTML="都道府県を選択", value="" ・・・・・・・デフォルトで選択されている
innerHTML="---未選択---", value="---未選択---"・・１番目の選択肢
innerHTML"=北海道", value="北海道"・・・・・・・・２番目の選択肢
innerHTML="青森", value="青森"・・・・・・・・・・３番目の選択肢

上記の<option>を４つ用意して、Javascriptで下記の処理をしています。

プルダウンがクリックされた瞬間に、"都道府県を選択"を非表示にする

⇒プルダウンの最上部には「都道府県を選択」が残るが、選択肢からは消える

「---未選択---」が選択された場合、"都道府県を選択"を表示＆選択状態に変える

つまり、表のヘッダ用にダミーの<option>を用意して、それを出したり消したりしているわけです。

問題点

PC版Chromeでの問題点：画面初回起動時にプルダウンをクリックすると、１～３番目の選択肢の下に、もう一段空白の行（選択はできない）ができる。これについては初回起動時にダミーのクリックイベントを発火させることで問題を回避しています。

今回はJavascriptで無理矢理に思い通りの動きをするようにしていますが、もっとスマートな実装方法（<select>や<option>の設定だけで何とかする等）はないでしょうか？
また、なぜiPhoneでうまく動かないのでしょうか？

お分りになる方がいらっしゃいましたら、アドバイスを頂ければ幸いです。

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5  </head>
6  <body>
7    <table border="1"  cellspacing="0" cellpadding="0">
8      <tr>
9        <th>No</th>
10        <th>
11          <select onClick="setEmptyOption(this)" onChange="changePulldown(this)">
12            <option value="">都道府県を選択</option>
13            <option value="---未選択---">---未選択---</option>
14            <option value="北海道">北海道</option>
15            <option value="青森">青森</option>
16          </select>
17        </th>
18      </tr>
19    </table>
20  </body>
21  <script>
22  
23  // プルダウンの選択肢からタイトルを削除する（非表示にする）
24  function setEmptyOption(clickedElem) {
25    // タイトルに表示されているoptionの値
26    var titleOptionVal = getSelectValue(clickedElem);
27    // 選択肢
28    var optinos = clickedElem.children;
29    // タイトルに表示されているoptionの値が空白の場合
30    if (titleOptionVal=="") {
31      // タイトル用のoptionを非表示
32      optinos[0].hidden = true;
33    }
34  }
35
36  // プルダウンの値が変更されたときの処理
37  function changePulldown(changedElem) {
38    // 選択されたoptionの値
39    var selectedOptionVal = getSelectValue(changedElem);
40    // 選択肢
41    var optinos = changedElem.children;
42    //「---未選択---」を選択した場合
43    if (selectedOptionVal=="---未選択---") {
44      // タイトルoptionを表示して選択
45      optinos[0].hidden = false;
46      optinos[0].selected = true;
47    }
48  }
49  
50  // 選択中のvalueを取得する
51  function getSelectValue(selectElem) {
52    var options = selectElem.children;
53    for (var i=0; i<options.length; i++) {
54      var optionValue = options[i].value;
55      if (options[i].selected==true) return options[i].value;
56    }
57    return null;
58  }
59  </script>
60</html>

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

回答1件

ベストアンサー

具体的な回答ではありませんが、select要素（option要素）の表示/非表示はブラウザにより挙動に差異が多い印象です。
select要素を空にしてしまってoption要素を作り直すほうが安全に書き換えできるかもしれません。

投稿2020/05/07 07:51

kei344

総合スコア69606

hamham-km

2020/05/07 10:32

お返事ありがとうございます。 >select要素（option要素）の表示/非表示はブラウザにより挙動に差異が多い印象です。なるほどそうなのですね。勉強になりました！ >select要素を空にしてしまってoption要素を作り直すほうが安全そうですよね・・・。ただ空にしてしまうと、現状、プルダウンクリック時（リスト表示時）に都合よく先頭に表示されている文字列（都道府県を選択）は、ブランクになってしまいそうですね。でも、安全性の方が優先度が高いので、他の方からより良い方法をいただけなければ、ご教示いただいた方法の実装を試してみます。

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