追加記入もできるプルダウンメニューの作り方

質問

こんばんわ。
タイトルに書いたように、
普通のプルダウンメニュー（以下メニュー）ではなく追加でメニュー以外の値を
記入できるようなものを作りたいと思っているのですが、どうやってよいものか悩んでおります。

今、情報（名前、住所、生年月日等）を
入力するフォームを作っています。
最終的にはメールで送信することになります。

その中で誕生日の西暦部分をメニューにして作っていたのですが、
あまりに対象範囲が多く（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

taka2456 · ベストアンサー

kentonさんのイメージに近いかどうかわかりませんが
一応こんなのでどうでしょうか
ただ、プルダウンの下向き▼を２度押さないとメニュが表示されない
欠点があります

<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

taka2456

下で画像を使ってるのですが
pull.jpgというファイルは、プルダウンメニューの右にある
下向きの三角形の画像です
画面をコピーしてペイントなどで加工して作ってください

お礼

taka2456さん、回答ありがとうございます。
ソースまで頂けるとは、思ってもいませんでした。
感謝です。

下の方のお礼にも書きましたが、
実際には依頼者との間で、年代を絞る方法で進めることに落ち着きました。

ソースを載せていただいたので、実際に動きを試してみて、自分の持ちアイテムの一つに加えようと思います。
JavaScriptは不勉強でわからないので、これを機に勉強してみようと思います。

ありがとうございました。

回答No.2

chun-2

ご質問は、ひとつのプルダウンメニューの中にユーザーが入力できるフィールドを作れないか、ということでしょうか？
であれば、これは難しい（というより出来ないのでは？）と思います。
（すみません、この部分自信ありません）

問題はリストのオプション項目が多く成りすぎてしまう、ということでしょうから、以下の様にしてみてはいかがでしょう。

１．プルダウンメニューを３つにわけ、横にぴったりとくっつけて表示する。
２．ひとつめのプルダウンメニューのオプションは、「１９」と「２０」を設定する。
３．ふたつめ、みっつめのプルダウンメニューには「０」から「９」までの数字をそれぞれ設定する。

上記のvalue値を連結させて受け取る。というかたちにすれば、１９００年から２０９９年までが指定できるようになります。

ユーザーにとっても、ひとつの項目で選ぶ、というアクションと書き込む、というアクションが混在しなくて楽なのではないかと思うのですが、いかがでしょうか？

お礼

回答ありがとうございます。
返事が遅くなり申し訳ありません。
更に説明が的を得ておらず申し訳ありません。

かなり無理難題だったのですね。(^_^;)

chun-2さんの提案されている方法、目からウロコでした。
ありがとうございます。

実際には依頼者との話し合いで、年代を絞ることになってしまったのですが、このような表記方法も一つの手だと自分のアイテムにしておきます。

回答No.1

so_blue

> 「INPUT TYPE」のようなものを併用して、
> 書き込んだ方の年号をVALUE値として

普通に<input type=text name=***>ではダメでしょうか？

プルダウンとテキストを併用させた場合は、
*プルダウンの初期表示はvalueを持たせない
*メール送信前にプルダウンorテキストのどちらかに値があるかチェック
が必要かと思います。

単純にnameを同じにしておけばいいかも....

お礼

so_blueさん、ありがとうございました。

他の方の回答にも書きましたが、依頼者との話し合いの結果、年代を絞ることになりました。
今回の件は、僕も良い勉強になりました。
今後も何かの際にはよろしくおねがいします。

補足

回答ありがとうございます。
実際に上記のようにやってみたのですが、
テキストボックスとメニューリストが併記されて２つ表示されてしまいました。

>単純にnameを同じにしておけばいいかも....
というのは、OPTIONタグの方のことでしょうか？

もうちょっと試してみます。。。