html Selectタブで選択されたときに表示されるものをプルダウンの名前と変える

Question

いつもお世話になっております。

以下のようなセレクトボックスがあり、value2や3が選択された場合のみ、セレクトボックスの表示表示を「未分類 - 下の階層」のようにしたいと考えております。
選択中のプルダウンの表示は以下のままで、選択された場合のみ表示を変更するという方法がググってもでてこなくこちらに質問させていただきました。
以下のようなJavascriptをイメージしていたのですが、なに表示されない状態となってしまいます。

<select name="folder" id="folder">
  <option value="1">未分類</option>
  <option value="2">　┗ 下の階層</option>
  <option value="3">　┗ 下の階層-2</option>
  <option value="4">ABC</option>
  <option value="5">DEF</option>
</select>

$(document).on("change", '#folder', function() {
  if ($(this).val() == 2 || $(this).val() == 3))  {
    $(this).val("未分類 - 下の階層")
  }
});

参考になるサイトでも構いませんので、適切な方法をご教示いただけますと幸いです。
よろしくお願いいたします。

Comments

[m.ts10806]

optgroupでは要件満たすのは難しいですか？

[lyzmfeqpxs54]

ご回答ありがとうございます。
親部分も選択できる仕様ですので、ポイントとして一覧を表示している時の名前と、選択後の名前が変わるという所が実現したい部分です

Answer 1

標準の <select> の表示で実現するのは無理だと思います。

• 選択された<option>のラベルと<select>ボックス内の表示は常に一致している
• ポップアップが開いた瞬間と閉じた瞬間にラベルを書き換えれば良さそうだが、そのタイミングを正確に知ることはできないはず。

<select>の手前に別の表示専用の要素を重ねて上手くやる必要がありそうですね。

目的は少々違いますが、似たような手法のサンプルを書いたことがあります。
セレクトボックスの値 - スタックオーバーフロー (案2)

Comments

[lyzmfeqpxs54]

ご回答ありがとうございます。

Selectのみでの実現は難しそうですか……。
ご教示いただいた方法で一度作成してみることにいたします。

Answer 2

select１つだとだと難しそうですね。
optionにstyleでdisplay:none という手もなくはないですが、個人的には推奨されません（確かブラウザにより効く効かないがあった記憶）

階層が違うものを並列にしてしまうのも管理上の意味合いとしては違うように思いますので、階層が違うリストは別のselectにして親の選択値によって表示や中身を切り替えるようにされたほうが良いと思います。

Comments

[K_3578]

>確かブラウザにより効く効かないがあった記憶
SafariとかChromeとかIE辺りはoptionにdisplay:noneが効かなかったはずですね。

[m.ts10806]

補足ありがとうございます。

[lyzmfeqpxs54]

ご回答ありがとうございます。

Selectのみでの実現は難しそうですかのでint32_t様にご教示いただいた方法で一度作成してみることにいたします。

[m.ts10806]

「１つだけでは」ですね。