セレクトボックスの表示について

前提・実現したいこと

セレクトボックスで表示している内容とプルダウンで表示される内容を変えたいと思ってます。
以下例だと「項目TEST1:テスト1111」を選択すると表示上は「TEST1」を表示
「項目TEST2:テスト2」を選択すると表示上は「TEST2」を表示
のようにしたいです。
これは実現可能でしょうか。

例：
┌─────┬─┐
│TEST1 │▽│
└─────┴─┘
▽を押すと・・・
┌───────────┐
│項目TEST1:テスト1111│
│項目TEST2:テスト2222│
│項目TEST3:テスト3333│
└───────────┘

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

回答2件

こんな感じでしょうか？

onmousedownイベントでoptionのテキストを書き換え onchangeイベントでoptionのテキストを戻す
ですが、同じ項目を選んだ時にonchangeが発動されないため、onmousedownした時に一旦ありえないところをセレクトしたことにします。

selectのname=とid=は任意です。

javascript
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="UTF-8">
5  <script>
6  function textChange(){
7    //同じ項目が選ばれた時にonchangeイベントが発動しないため、一旦ありえない数字をselectedする
8    document.getElementById('blood').selectedIndex=-1;
9
10    document.getElementById('blood').options[0].text="項目TEST1:テスト1111";
11    document.getElementById('blood').options[1].text="項目TEST2:テスト2222";
12    document.getElementById('blood').options[2].text="項目TEST3:テスト3333";
13  }
14  function textReChange(){
15    document.getElementById('blood').options[0].text="TEST1";
16    document.getElementById('blood').options[1].text="TEST2";
17    document.getElementById('blood').options[2].text="TEST3";
18  }
19  </script>
20</head>
21<body>
22  <select name="blood" id="blood" onmousedown="textChange();" onchange="textReChange()">
23    <option value="A">TEST1</option>
24    <option value="B">TEST2</option>
25    <option value="C">TEST3</option>
26  </select>
27</body>
28</html>

投稿2018/11/24 05:21

編集2018/11/24 05:44

colling

総合スコア798

CSSのしくみで、特にjQueryによる画面デザインの技術でしょう。
【jQuery】jQueryでドロップダウンメニューの記事のようにスマートな表示が簡単に導入できます。
選択後のJavaScriptのメソッドの呼出は、実装しながら習得していきましょう。
またBootstrapのレスポンシブルデザインもチェックしてみましょう。

投稿2018/11/24 02:58