ここから質問投稿すると、最大10000ポイント当たる!!!! >>

教えて下さい。

selectのコンボボックスを使用して、プルダウンを作成したいと考えて
いますが、そのコンボボックスを手入力も可能としたいと考えて
います。

何か良い方法はないでしょうか???

サンプル的なものを教えて頂けれ幸いです。

よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

どのようなインターフェースにするのかをきちんと決めておかないと、操作しにくいものになりそう…



ご参考まで。(細かいところはいい加減)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head><title>test</title>
<style type="text/css">
select, input { width:8em; }
</style>

<script type="text/javascript">
<!--
function test(evt) {
var i, tp = evt.type, t = evt.target || evt.srcElement;
var pair = document.getElementsByTagName(tp === 'blur'?'SELECT':'INPUT');
for (i=0; i<pair.length; i++) if (pair[i].name == t.name) break;
pair = i<pair.length?pair[i]:null;
if (tp === 'change') {
if (pair) pair.value = t.value;
} else if (tp === 'keydown') {
var c =evt.keyCode;
if (pair && (c != 9 && c != 13 && c != 38 && c != 40)) {
t.style.display = 'none';
pair.style.display = 'inline';
pair.focus();
}
} else if (tp === 'blur') {
if (t.value) {
pair.options.length = 4;
pair.options[4] = new Option(t.value, t.value);
pair.options[4].selected = true;
}
t.style.display = 'none';
pair.style.display = 'inline';
}
}
-->
</script>
</head>

<body>
<select name="sel1" onchange="test(event)" onkeydown="test(event)">
<option value="" selected>
<option value="v1">v1
<option value="v2">v2
<option value="v3">v3
</select>
<input type="text" name="sel1" value="" onblur="test(event)" style="display:none;">
</body>
</html>
    • good
    • 0

HTMLのコンボボックスは


入力できないわ。
<input type="text">と<select>を
上手に組み合わせるしかないわね。
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qプルダウンメニューにテキスト入力?

現在、HTMLのフレームを左右に2分割しています。左側に用意したいくつかのラジオボタンやフォームの入力内容などの条件を入れてボタンを押すと、Perlで書き出された結果表示が右側に出る仕組みです。

この左側画面にプルダウンメニューを置いて、選択枝のひとつに「テキスト入力欄を設ける」ということは可能でしょうか?

ご教授よろしくお願いします。
ちなみに今回のperlは人に教わりながらようやく書きまして、JavaScriptなども、ほとんどわかってない有様で・・・。

Aベストアンサー

・ JavaScriptで書くとこのようなことでしょうか。

<html>
<head>
<script type="text/javascript">
function setSel(sel) {
if (sel.value == "0") {
sel.selecctedIndex = 0;
sel.form.date.style.display = 'none';
} else {
sel.selecctedIndex = 1;
sel.form.date.style.display = 'block';
}
}
</script>
</head>
<body>
<form id="F1" action="#">
日付検索:
<br />
<select onChange="setSel(this)">
<option value="0">
すべての日付
</option>
<option value="1">
入力した限定の日付
</option>
</select>
<input type="input" name="date" value="" style="display: none" />
</form>
</body>
</html>

・ JavaScriptで書くとこのようなことでしょうか。

<html>
<head>
<script type="text/javascript">
function setSel(sel) {
if (sel.value == "0") {
sel.selecctedIndex = 0;
sel.form.date.style.display = 'none';
} else {
sel.selecctedIndex = 1;
sel.form.date.style.display = 'block';
}
}
</script>
</head>
<body>
<form id="F1" action="#">
日付検索:
<br />
<select onChange="setSel(this)">
<option value="0">
...続きを読む

Qリストボックスでフリー入力したい

初心者です。
問合せフォームで現在リストボックスで、選択1 選択2 選択3 その他 が選択できるように作成しています。
実際、その他の数が多いので、フリーで入力できるように
したいのです。リストボックスでは不可能ですか?
無理でしたら、他の方法でもいいので、実現できる方法
アドバイスお願いします。

Aベストアンサー

No1様の回答とまったく同じ発想の例です。

<html>
<script type="text/javascript">
function check(f){
flg=(f.elements('n1').selectedIndex==4);
if (!flg) f.elements('n2').value='';
f.elements('n2').parentNode.style.visibility=flg?'visible':'hidden';
}
</script>

<body>
<form action="" method="">
<select name="n1" onchange="check(this.form)">
<option value="0">
<option value="1">選択1
<option value="2">選択2
<option value="3">選択3
<option value="4">その他
</select>
<span style="visibility:hidden;">
フリー入力:<input type="text" size=30 name="n2">
</span>
</form>
</body>
</html>

No1様の回答とまったく同じ発想の例です。

<html>
<script type="text/javascript">
function check(f){
flg=(f.elements('n1').selectedIndex==4);
if (!flg) f.elements('n2').value='';
f.elements('n2').parentNode.style.visibility=flg?'visible':'hidden';
}
</script>

<body>
<form action="" method="">
<select name="n1" onchange="check(this.form)">
<option value="0">
<option value="1">選択1
<option value="2">選択2
<option value="3">選択3
<option value="4">その他
</...続きを読む

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

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

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

その中で誕生日の西暦部分をメニューにして作っていたのですが、
あまりに対象範囲が多く(1900年代前半~2002年まで)
それらをリストとして表示するのはあまり好ましくないということがあり、
1960年以降をメニューにして、
1959年以前の方には、そこに記入してもらうような方法はできないかと考えています。

メニューですと、
<SELECT NAME="***">
<OPTION VALUE="1960">1960</OPTION>
<OPTION VALUE="1961">1961</OPTION>


</SELECT>
などと書けますが、これに「INPUT TYPE」のようなものを併用して、
書き込んだ方の年号をVALUE値としてくれるようにできないものなのでしょうか?
例)***=1952(1952と記入したものがVALUE値として返ってくる)
自分で試してみたのですが、思った結果にはなりませんでした。

これを実現する良い方法を知っている方がいましたら、
教えていただけないでしょうか?
どうぞよろしくお願いします。

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

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

その中で誕生日の西暦部分をメニューにして作っていたのですが、
あまりに対象範囲が多く(1900年代前半~2002年まで)
それらをリストとして表示するのはあまり...続きを読む

Aベストアンサー

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>

最初、上をコピーして新規に別ファイルで作成して確認してください
よければ位置などを設定してください
テストは十分にお願いします

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 i...続きを読む

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

Qjavascriptでセレクトボックスの"selected"を動的につ

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
</select>月

<select name='day'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
<option value='24'>24</option>
<option value='25'>25</option>
<option value='26'>26</option>
<option value='27'>27</option>
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日


このセレクトボックスに、例えば今日の日付"2010年9月30日"だったら、それぞれの年、月、日の<option>に"selected"をつけたいのですが、javascriptではどのようにして実現したら良いのでしょうか?

よろしくお願いします。

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8...続きを読む

Aベストアンサー

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<option value='2009'>2009</option>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
</select>月

<select name='day'>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日
</div>
</form>

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<opt...続きを読む

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Qテキストボックスに数字しか入力できないようにするには?

タイトルの通りなのですが、あるテキストボックスに数字しか入力できないようにしたいのですが可能でしょうか?また、

「あいうえお 12345 「」:・、¥・」

というような文字列をコピーし、そのテキストボックスにペーストした際にも数字の12345だけが残るといった事も実現したいのですが…

どなたかご存知の方いらっしゃいましたら教えて頂けると幸いです。

Aベストアンサー

>英数字

では、こんな感じで

<input type="text" onKeyup="this.value=this.value.replace(/[^0-9a-z]+/i,'')">

Qコンボボックスの連動

コンボボックスの連動を実現したいです。

コンボボックスがAとBの2個あります。

Aにメーカーをセット
例)
1 エプソン
2 キャノン
3 HP

Bに機種名をセット
例)Aでエプソンを選択したとき
1 EPシリーズ
2 PMシリーズ

例)Aでキャノンを選択したとき
1 PIXUSシリーズ
2 Sateraシリーズ

コンボボックスAの選択内容により
コンボボックスBの内容を変更したいです。

各A,Bの選択した値(1、2)も取得したいです。

よろしくお願いします。

Aベストアンサー

検索すれば、質問するまでもなくたくさん見つかるはず。

<例>
http://kawama.jp/archives/2007/03/javascript_3.html
http://www.geocities.co.jp/SiliconValley/4334/unibon/asp/selectexample.html

スクリプトOFFも考慮してあるもの
http://d.hatena.ne.jp/Mars/20071109

ライブラリを使用しているもの
http://tenderfeel.xsrv.jp/mootools/562/

QJava-jspの画面入力値保持について

画面にテキスト、ラジオボタン、リストボックス とボタンがあります。
ボタンを押すと、JAVAで処理を行い、jspのviewで表示します。

1.テキスト、ラジオボタン、リストボックスなどに値が入力、設定されている状態で
ボタンを押して処理後にテキスト、ラジオボタン、リストボックスの値が
変わらないようにしたいのですが、
その場合、たとえば、入力、設定値をセッションになどに格納しておき
jspの所で、セッションから値を設定すると言うような方法になるのでしょうか?

2.ボタン押して処理後、ラジオボタン、リストボックスの選択値も
  変えないようにしたいのですが、
  これはどのように実現するのが、適切なのでしょうか?


以上、よろしくお願いします。

Aベストアンサー

ボタンというのはフォームのサブミットボタンのことですよ?
つまり、画面遷移が起きることを前提とすると(元の同じ画面に戻るのも含みます)

テキスト、ラジオボタン、リストボックスの状態を「要求パラメータ」として
送信し、それを次画面に反映するというのが最も一般的な方法です。

フレームワーク struts のアクションフォーム&JSPカスタムタグを使うと比較的楽に
そういう画面が作れますが、多くのフレームワークでも大差ありません。
簡単な画面なら素のサーブレート+JSPでも十分作れます。

セッションでもできますが、 セッションはログイン情報などの保持など、
限定された範囲で使うのが普通です。また、結局セッションに最新の
テキスト、ラジオボタン、リストボックスの状態を送るには、「要求パラメータ」
を送信する必要があります。

AJAXを使うという方法もあります。この場合、ボタンは AJAX 処理だけを行い
画面遷移を起こさないので、サーバ側で画面のテキスト、ラジオボタン、
リストボックスの状態をもつ必要はありません。


人気Q&Aランキング