こんばんわ。
タイトルに書いたように、
普通のプルダウンメニュー(以下メニュー)ではなく追加でメニュー以外の値を
記入できるようなものを作りたいと思っているのですが、どうやってよいものか悩んでおります。
今、情報(名前、住所、生年月日等)を
入力するフォームを作っています。
最終的にはメールで送信することになります。
その中で誕生日の西暦部分をメニューにして作っていたのですが、
あまりに対象範囲が多く(1900年代前半~2002年まで)
それらをリストとして表示するのはあまり好ましくないということがあり、
1960年以降をメニューにして、
1959年以前の方には、そこに記入してもらうような方法はできないかと考えています。
メニューですと、
<SELECT NAME="***">
<OPTION VALUE="1960">1960</OPTION>
<OPTION VALUE="1961">1961</OPTION>
・
・
</SELECT>
などと書けますが、これに「INPUT TYPE」のようなものを併用して、
書き込んだ方の年号をVALUE値としてくれるようにできないものなのでしょうか?
例)***=1952(1952と記入したものがVALUE値として返ってくる)
自分で試してみたのですが、思った結果にはなりませんでした。
これを実現する良い方法を知っている方がいましたら、
教えていただけないでしょうか?
どうぞよろしくお願いします。
No.3ベストアンサー
- 回答日時:
kentonさんのイメージに近いかどうかわかりませんが
一応こんなのでどうでしょうか
ただ、プルダウンの下向き▼を2度押さないとメニュが表示されない
欠点があります
<FORM name="MYFORM">
<DIV id="PULL" style="position:absolute;top:100px;left:100px;visibility:hidden" onclick="kesu_shori()">
<SELECT name="xx">
<OPTION value="1960">1960</OPTION>
<OPTION value="1961">1961</OPTION>
<OPTION value="1962">1962</OPTION>
<OPTION value="1963">1963</OPTION>
</SELECT>
</DIV>
<DIV id="NEN" style="position:absolute;top:100px;left:100px;visibility:visible">
<INPUT type="text" name="YEAR" maxlength="4" size="5">
</DIV>
</FORM>
<DIV id="MENU" style="position:absolute;top:100px;left:133px;visibility:visible" onclick="pull_hyoji()">
<IMAGE src="pull.jpg" height="23" width="20">
</DIV>
<SCRIPT LANGUAGE="JavaScript">
function pull_hyoji(){
document.all.PULL.style.visibility = "visible";
}
function kesu_shori(){
document.all.PULL.style.visibility = "hidden";
document.MYFORM.YEAR.value=document.MYFORM.xx.options[document.MYFORM.xx.selectedIndex].value;
}
</SCRIPT>
最初、上をコピーして新規に別ファイルで作成して確認してください
よければ位置などを設定してください
テストは十分にお願いします
No.4
- 回答日時:
下で画像を使ってるのですが
pull.jpgというファイルは、プルダウンメニューの右にある
下向きの三角形の画像です
画面をコピーしてペイントなどで加工して作ってください
taka2456さん、回答ありがとうございます。
ソースまで頂けるとは、思ってもいませんでした。
感謝です。
下の方のお礼にも書きましたが、
実際には依頼者との間で、年代を絞る方法で進めることに落ち着きました。
ソースを載せていただいたので、実際に動きを試してみて、自分の持ちアイテムの一つに加えようと思います。
JavaScriptは不勉強でわからないので、これを機に勉強してみようと思います。
ありがとうございました。
No.2
- 回答日時:
ご質問は、ひとつのプルダウンメニューの中にユーザーが入力できるフィールドを作れないか、ということでしょうか?
であれば、これは難しい(というより出来ないのでは?)と思います。
(すみません、この部分自信ありません)
問題はリストのオプション項目が多く成りすぎてしまう、ということでしょうから、以下の様にしてみてはいかがでしょう。
1.プルダウンメニューを3つにわけ、横にぴったりとくっつけて表示する。
2.ひとつめのプルダウンメニューのオプションは、「19」と「20」を設定する。
3.ふたつめ、みっつめのプルダウンメニューには「0」から「9」までの数字をそれぞれ設定する。
上記のvalue値を連結させて受け取る。というかたちにすれば、1900年から2099年までが指定できるようになります。
ユーザーにとっても、ひとつの項目で選ぶ、というアクションと書き込む、というアクションが混在しなくて楽なのではないかと思うのですが、いかがでしょうか?
回答ありがとうございます。
返事が遅くなり申し訳ありません。
更に説明が的を得ておらず申し訳ありません。
かなり無理難題だったのですね。(^_^;)
chun-2さんの提案されている方法、目からウロコでした。
ありがとうございます。
実際には依頼者との話し合いで、年代を絞ることになってしまったのですが、このような表記方法も一つの手だと自分のアイテムにしておきます。
No.1
- 回答日時:
> 「INPUT TYPE」のようなものを併用して、
> 書き込んだ方の年号をVALUE値として
普通に<input type=text name=***>ではダメでしょうか?
プルダウンとテキストを併用させた場合は、
*プルダウンの初期表示はvalueを持たせない
*メール送信前にプルダウンorテキストのどちらかに値があるかチェック
が必要かと思います。
単純にnameを同じにしておけばいいかも....
この回答への補足
回答ありがとうございます。
実際に上記のようにやってみたのですが、
テキストボックスとメニューリストが併記されて2つ表示されてしまいました。
>単純にnameを同じにしておけばいいかも....
というのは、OPTIONタグの方のことでしょうか?
もうちょっと試してみます。。。
so_blueさん、ありがとうございました。
他の方の回答にも書きましたが、依頼者との話し合いの結果、年代を絞ることになりました。
今回の件は、僕も良い勉強になりました。
今後も何かの際にはよろしくおねがいします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript 電車の運賃を出すプログラムを作っています。 2 2022/06/22 09:36
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript 中百舌鳥駅と深井駅を入れ替えて選択しても同じ挙動にしたいです。 2 2022/06/24 18:45
- HTML・CSS ただいま勉強始めたての初心者です。フォームを縦並べにしたいです。 2 2022/11/20 17:18
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
html スクロール要素を下から表...
-
★★★フッター最下部固定/スクロ...
-
CSSでdivのheightを動的に
-
チェックボックスの背景色って...
-
フッター上部に謎の隙間
-
textareaで入力した文字を改行...
-
TABLEの高さを固定したいのですが…
-
Ctrl+F(検索)の窓を出したいの...
-
スクロール可能なチェックボックス
-
離れた場所にマウスオーバーで...
-
3点リーダーの作り方
-
MAX関数を使ってからLEFT JOIN...
-
MFCで画像を表示させているので...
-
JavaScriptで変更した属性の元...
-
Gifアニメ、最後のコマに行った...
-
クリックで色変更後に既に変更...
-
createElementが一瞬で消えてし...
-
複数のバナーをリロードする度...
-
デフォルト非表示にしたい。【t...
-
javascriptテキストBOX色を元に...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSS <div>の入れ子が反映さ...
-
フッター上部に謎の隙間
-
Ctrl+F(検索)の窓を出したいの...
-
【CSS】floatで左右に並べた...
-
css固定したフッターが本文と重...
-
HTMLですCSSです 画像のように...
-
htmlのstyleのposition:relativ...
-
HTMLですCSSです この画像のよ...
-
Flickity で画像にリンクを貼る...
-
画像の特定の座標にカーソルが...
-
チェックボックスの背景色って...
-
html スクロール要素を下から表...
-
レイアウトが崩れないようにす...
-
スクロール可能なチェックボックス
-
リンクで違うページの指定箇所...
-
オンマウス時に別画像を上に重...
-
フッターの下に隙間ができてしまう
-
スタイルシート(CSS)で、高さ...
-
かなり困っています。知恵を貸...
-
離れた場所にマウスオーバーで...
おすすめ情報