おしえて

複数のプルダウンを1つにまとめる方法

解決済

質問者：tanakappp
質問日時：2017/11/08 11:51
回答数：4件

下のHTML、CSS、javascriptにて、3つのプルダウンを1回の選択で起動させたいです。
現状①select id="year" 選択・同value値の選択、②select id="week" 選択・同value値の選択、③select id="day" 選択・同value値の選択をしないといけませんが、
これを①select id="year" ・"week"・"day"を一括で選択、②"year" のvalue値の選択・"week"のvalue値の選択・"day"のvalue値の選択にしたいです。
何処をどう修正すれば良いでしょうか？
イメージは以下の画像です。
よろしくお願いします。

<form>
<select id="year" onchange="this.form.elements['todovalue3'].value=this.value">
<option value="">--年</option>
<option value="2016">2016年</option>
<option value="2017">2017年</option>
<option value="2018">2018年</option>
</select>
<input id="todovalue3" name="todovalue3" type="hidden"/>

<select id="week" onchange="this.form.elements['todovalue4'].value=this.value">
<option value="">--月</option>
<option value="01">1月</option>
<option value="02">2月</option>
<option value="03">3月</option>
</select>
<input id="todovalue4" name="todovalue4" type="hidden"/>

<select id="day" onchange="this.form.elements['todovalue5'].value=this.value">
<option value="">--日</option>
<option value="01">1日</option>
<option value="02">2日</option>
<option value="03">3日</option>
</select>
<input id="todovalue5" name="todovalue5" type="hidden"/>
<form>
以下略

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： debu120t
回答日時：2017/11/15 11:27

わかるわかる、それどうやってんの？っていうときあります笑

そう思ったときに説明するのもやっとだったりします。わからないんだから、どっから説明していいのか、わからねえ、、とか。
回答者さんたちも理解できないか混乱している感じですね。

「イメージ画像のように、年、月、日を同時にドラムロールで選択できるようにする方法はありますか？」
というような質問だとわかりやすかったと思います。

datetime-localを試してみてください。
<input id="date" type="datetime-local" name="date" value="" />

これじゃなかったら私にもわかりません。

- 1
- 件

通報する

参考程度に

No.3

回答者： fujillin
回答日時：2017/11/14 15:03

こんにちは

ご質問文を読んでも、なさりたいことがいまいちよくわからないのですが・・・

「セレクト要素を一つずつ展開して選択するのではなく、まとめて展開した状態にして選択したい」
というような意味でしょうか？

HTMLのセレクト要素の挙動そのものを変えることは無理だと思いますので、実現するには代替の表示内容を用意して疑似的に目的の操作性を確保するということになるのではないかと思います。
ひとつの解決方法として、＃2様もおっしゃっているように、別の入力要素（ダイアグラムなど）を表示して入力した値をセットする方法が考えられます。

よく見かける例としては、Datepickerのようにカレンダー表示から日付を選択するタイプのものでしょうか？
http://alphasis.info/2011/06/jquery-ui-datepicker/
ご質問文では、単純にセレクト要素をまとめて展開なさりたいということのように思われますが、表示形態と操作性が異なるだけで、仕組みとしては同様です。

セレクト要素の展開の状態にこだわるのであれば、それに近いものを作るしかないでしょう。
ごく簡単な例を以下に…
※ id="week"はあまりにもなので、monthに変更してあります

＞イメージは以下の画像です
・・・とありますが、ひょっとすると画像の下半分が入力用のダイアログのおつもりなのでしょうか？
もしそうであるなら、縦型のスライダーを3つ並べれるようなイメージにすれば可能そうですね。

とは言え、どうなのかよくわからないので、ごく簡単にセレクト要素を展開表示風にするだけの例です。
（実際に、表示している内容はセレクト要素ではなく、id="_dateSelector"の要素内に生成された内容です）

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>

<style type="text/css">
#_dateSelector, #_dateSelector * { margin: 0; padding: 0; }
#_dateSelector ul {
list-style-type: none; position: absolute;
background-color: white; border: 1px solid #AAA;
}
#_dateSelector li { text-align: center; font-size: 0.85em; }

#_dateSelector li + li { border-top: 1px solid #DDD; }
#_dateSelector ul li.active { color: white; background-color: #68E; }
#_dateSelector li:hover { background-color: #DDD; }

#_dateSelector::before {
content: ""; position: fixed;
width: 100%; height: 100%;
top: 0; left: 0;
background-color: #CCC;
opacity: 0.2;
}
</style>

<script type="text/javascript">
window.addEventListener("load", function(){
var ids = ["year", "month", "day"];
var i, j, x, y, e;

var sel = document.createElement("div");
sel.id = "_dateSelector";
for(i=0; i<3; i++){
var ul = document.createElement("ul");
var elm = document.getElementById(ids[i]);
for(j=0; e=elm.options[j++];){
var li = document.createElement("li");
li.textContent = e.textContent;
ul.appendChild(li);
}

x = 0, y = 0, e = elm;
while(e){ x += e.offsetLeft; y += e.offsetTop; e = e.offsetParent; }
ul.style.width = elm.clientWidth + "px";
ul.style.left = x + "px";
ul.style.top = (y + elm.clientHeight) + "px";
ul.childNodes[elm.selectedIndex].classList.add("active");
sel.appendChild(ul);

elm.addEventListener("click", function(e){
e.preventDefault();
e.target.blur();
sel.style.display = "block";
}, false);
}
document.querySelector("body").appendChild(sel);
sel.style.display = "none";

sel.addEventListener("click", function(evt){
var t = evt.target, p = t.parentNode, i, j;
if(t.nodeName != "LI"){
sel.style.display = "none";
} else {
var c = sel.childNodes;
for(i=0; i<c.length; i++) if(c[i] == p) break;
c = c[i].childNodes;
Array.prototype.map.call(c, function(e){ e.classList.remove("active"); });
for(j=0; j<c.length; j++) if(c[j] == t) break;
c[j].classList.add("active");
document.getElementById(ids[i]).selectedIndex = j;
}
}, false)

}, false);
</script>

</head>
<body>

<form>
<select id="year">
<option value="">--年</option>
<option value="2016">2016年</option>
<option value="2017">2017年</option>
<option value="2018">2018年</option>
</select>

<select id="month">
<option value="">--月</option>
<option value="01">1月</option>
<option value="02">2月</option>
<option value="03">3月</option>
</select>

<select id="day">
<option value="">--日</option>
<option value="01">1日</option>
<option value="02">2日</option>
<option value="03">3日</option>
<option value="04">4日</option>
<option value="05">5日</option>
</select>
</form>

</body>
</html>

※ ブラウザによってはセレクト要素の場合に、blurがうまく動作しないものがあるようなので、イベントの発生をfocusではなく、clickにしてあります。
※ セレクト要素の機能を利用しないので、必ずしもセレクト要素の必要はないでしょうから、対象をinput要素などに変えておく方が動作が確実になると思います。
※ ダイアログの終了は、画面上の他の部分をクリックしたときにしてあります。
※ もしも、「添付図の下半分が入力用の要素の例」という意図であるなら、縦表示の選択肢群をスライダー化しておいて、透視図風の表示に関しては、CSSのperspective、transformを利用した3D表示にすることで、可能ではないかと思います。（見た感じでは、選択のジャンプができないようなので、操作性は返って良くないような印象を受けますが・・・）

- 0
- 件

通報する

No.2

回答者： Ogre7077
回答日時：2017/11/08 14:55

考え方を変えて

<button onclick="dateをダイアログ表示する処理">日付の指定</button>

<form name=date onsubmit="ダイアログを閉じて値を反映する処理">
<select name=y size=5> ... </select>
<select name=m size=5> ... </select>
<select name=d size=5> ... </select>
<button type=submit>決定</button>
</form>