下の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>
以下 略
No.4ベストアンサー
- 回答日時:
わかるわかる、それどうやってんの?っていうときあります笑
そう思ったときに説明するのもやっとだったりします。わからないんだから、どっから説明していいのか、わからねえ、、とか。
回答者さんたちも理解できないか混乱している感じですね。
「イメージ画像のように、年、月、日を同時にドラムロールで選択できるようにする方法はありますか?」
というような質問だとわかりやすかったと思います。
datetime-localを試してみてください。
<input id="date" type="datetime-local" name="date" value="" />
これじゃなかったら私にもわかりません。
No.3
- 回答日時:
こんにちは
ご質問文を読んでも、なさりたいことがいまいちよくわからないのですが・・・
「セレクト要素を一つずつ展開して選択するのではなく、まとめて展開した状態にして選択したい」
というような意味でしょうか?
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表示にすることで、可能ではないかと思います。(見た感じでは、選択のジャンプができないようなので、操作性は返って良くないような印象を受けますが・・・)
No.2
- 回答日時:
考え方を変えて
<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>
No.1
- 回答日時:
ちょっと意味が理解できないのですがこういうことでしょうか?
select{
border:none;
-webkit-appearance:none;
-moz-appearance:none;
}
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript 中百舌鳥駅と深井駅を入れ替えて選択しても同じ挙動にしたいです。 2 2022/06/24 18:45
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript 2段階プルダウンで1段階目の選択を終えた後に選択ボックスを見えなくしたい 2 2022/07/05 21:58
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウン選択を変更すると、...
-
javascriptでセレクトボックス...
-
VBScriptでHTMLのセレクトボッ...
-
【javascript】連想配列からセ...
-
select要素のvalueを配列で取得...
-
selectが変更されたらnameを指...
-
セレクトボックスを2つ選択して...
-
連想配列からセレクトボックス...
-
<input>の選択肢をプルダウンメ...
-
ラジオボタンとプルダウンを連...
-
ラジオボタンの選択に応じてプ...
-
addclassがうまく働きません
-
selectを変更不可にしたい
-
同じ名前のセレクトがある場合...
-
JavaScriptで<select>の<option...
-
プルダウンで選択した項目にあ...
-
プルダウンの値によって活性・...
-
selectの初期値を設定したい
-
まったく同じ<select>フォーム...
-
セレクトボックスを使用した、...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
javascriptでセレクトボックス...
-
selectを変更不可にしたい
-
全てのselect要素をデフォルト...
-
<input>の選択肢をプルダウンメ...
-
Selectボックスの一覧表示方法
-
プルダウン選択を変更すると、...
-
セレクトボックスで配列を呼び...
-
JavaScriptで<select>の<option...
-
プルダウンのoptionの表示・非...
-
select要素のvalueを配列で取得...
-
【javascript】連想配列からセ...
-
ラジオボタンとプルダウンを連...
-
同じ名前のセレクトがある場合...
-
selectボックスの選択結果を変...
-
プルダウンの値によって活性・...
-
javascriptで合計金額を算出し...
-
プルダウンメニューに連動する...
-
リストボックス内の重複したも...
-
VBScriptでHTMLのセレクトボッ...
-
連想配列を使ってコンボボック...
おすすめ情報