• ベストアンサー

リスト（コンボ）ボックスの日本語による項目選択

Htmlのリストボックス（select)で、複数文字の日本語を入力してリストを選択する方法を教えて下さい。 IEデフォルトの動きでは、入力された最後の文字から始まる語が選択されます。 Javascriptのサンプルを提供して頂けるとありがたいです。 例：<option>あか</option><option>かき</option>　というリストで「あか」と打って「あか」を選択したいのです。

質問者が選んだベストアンサー

  • ベストアンサー
  • m035
  • ベストアンサー率44% (38/86)
回答No.1

textboxに入力→リスト選択ですね？ <html> <head> <title>リストボックス自動選択</title> <script type="text/javascript"> <!-- function set(){ var txt=document.hoge.hogetxt.value; for(var i=0;i<document.hoge.hogebox.options.length;i++){ if(document.hoge.hogebox.options[i].text.indexOf(txt)!=-1&&txt.length>0){ document.hoge.hogebox.selectedIndex=i; i=10000; } } } //--> </script> </head> <body> <form name="hoge"> <input type="text" value="" name="hogetxt" size=4 maxlength=4><input type="button" value="リストボックス自動選択" onclick="set()"><br> <select name="hogebox"> <option>　　</option> <option>あか</option> <option>あき</option> <option>あく</option> <option>あけ</option> </select> </form> </body> </html> インデントが無くなっているので自分で修正したほうがいいかも知れません。

isi_sukima
質問者

お礼

m035様 どうもありがとうございます。 ただ想定しているのは「textboxに入力→リスト選択」という方法ではなく、リストボックスにカーソルがある状態から文字入力し、選択したいのですがそういった方法は不可能でしょうか。

isi_sukima
質問者

補足

m035様 どうもありがとうございます。 ただ想定しているのは「textboxに入力→リスト選択」という方法ではなく、リストボックスにカーソルがある状態から文字入力し、選択したいのですがそういった方法は不可能でしょうか。

その他の回答 (1)

  • m035
  • ベストアンサー率44% (38/86)
回答No.2

テキストボックスを隠して擬似的にやってみました。 <html> <head> <title>リストボックス自動選択2</title> <script type="text/javascript"> <!-- function set(txt){ var flag=0; for(var i=0;i<document.hoge.hogebox.options.length;i++){ if(document.hoge.hogebox.options[i].text.indexOf(txt)!=-1&&txt.length>0&&flag==0){ document.hoge.hogebox.selectedIndex=i; flag=1; } } if(flag==0){ document.hoge.hogebox.selectedIndex=0; } } //--> </script> </head> <body> <form name="hoge"> 使用法：リストボックスをクリックし、キー入力してください。<br>入力後は画面上のどこかをクリックしてください。<br>検索内容とヒットすればボックスが自動選択されます。<br> <select name="hogebox" onclick="document.hoge.kakusi.focus()"> <option>なし</option> <option>あか</option> <option>あき</option> <option>あく</option> <option>あけ</option> </select> <input type="text" name="kakusi" size=10 style="position:absolute; top:-100; left:-100; width:1; height:1;" onblur="set(this.value);this.value=''"> </form> </body> </html> 例によってインデントは自分で。

isi_sukima
質問者

お礼

m035さん どうもありがとうございました。 とても助かりました！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • リストボックス全選択について

    JavaScriptについて質問です。 リストボックスA,B　と　プルダウンC という画面項目があると仮定し、 submitボタンを押下したとき、 リストボックスA,Bの項目全てが全選択され、プルダウン項目はそのままにしたいと考えております。 下記のソースのように作成したのですが、 リストボックスが全選択されるところまでは良いのですが、 プルダウン項目が最後の項目が選択された状態になってしまいます。 リストボックスだけが全選択され、プルダウン項目はそのままにするにはどうしたら良いでしょうか。 かなり困ってます。 どなたか助けてください。。 以下ソースです。 <html> <head> <script language="JavaScript"> <!-- function selectAll(){ 　var str = document.getElementsByTagName("option"); for(i=0;i<str.length;i++){ str[i].selected = true; } } //--> </script> </head> <body> <table> <tr> <td> リストA<br> <select name="listboxA" multiple> <option value="サンプル1">サンプル1</option> <option value="サンプル2">サンプル2</option> <option value="サンプル3">サンプル3</option> </select> </td> <td> リストB<br> <select name="listboxB" multiple> <option value="サンプル4">サンプル4</option> <option value="サンプル5">サンプル5</option> <option value="サンプル6">サンプル6</option> </select> </td> <td> プルダウンC<br> <select name="Pdown"> <option value="サンプル7">サンプル7</option> <option value="サンプル8">サンプル8</option> <option value="サンプル9">サンプル9</option> </select> </td> </tr> </table> <br> <input type=submit value="送信" onClick="selectAll()"> </body> </html>

  • リストボックスから選択できないのはどうして！？

    実はJAVASCRIPTでリストボックス(select1)から会社名を選択するとその下のテキストボックス(link)に そのURLがでるものを作っていたのですが、なぜかリストボックスが選択できない状態になってしまいます。 下のがそのコードなのですが、どなたかわかるかたいらっしゃいませんか？ どうぞよろしくお願いいたします。 <SCRIPT type="text/javascript"> <!-- function aaa() { var a; if((f.select1.value) ="Ａ社") {url = "http://www.a***.co.jp" }; else if((f.select1.value) ="Ｂ社") {url =" http://www.b***.co.jp" }; else if((f.select1.value) ="Ｃ社") {url = "http://www.c***.co.jp" }; else{url = "URLはありません"}; (f.link.value) = url; return } //--> </script> <select onchange = "aaa()" name="select1"> <option value="A社" selected>A社</option> <option value="B社">B社</option> <option value="C社">C社</option> 　　　　　<option value="D社">D社</option> </select> <input type="text" name="link">

  • VBAコンボボックスのリスト選択について

    現在、ユーザーフォームを作成していますがコンボボックスでのリスト選択について質問します。 【質問内容】 コンボボックスを３つ作成し、Select Caseでそれぞれのリストを連動させるプログラムを組んでいます。 (1)３つとも選択した後で例えばリスト１を変更しようとするとエラーになってしまいます。リスト以外の文字列も入力できるようにしているつもりですがなぜでしょうか？ (2)選択後、シートセルに転送した後、テキストボックスならば「.Text = ""」で一旦空白になりますが、コンボボックスの場合どうしたらよいのでしょうか？ シートセルに転送後も選択した内容が残ってしまい結局(1)の事象に基づきエラーになってしまい連続入力ができません。 初歩的な質問で恐縮ですが、よろしくお願いいたします。

  • Javascriptのリストボックスのリンクの指定の仕方

    Javascriptで2つのリストボックスを作成し、 1つ目のリストボックスで選択した値によって、 2つ目にリストボックスに表示される内容が変わるようにしました。 ソースは以下です。 <script language="JavaScript"> var no = new Array; no[0] = new Array("sample1", "sample2", "sample3"); no[1] = new Array("1sample1", "12sample2", "1sample3"); no[2] = new Array("2sample1", "2sample2", "2sample3"); no[3] = new Array("3sample1", "3sample2", "3sample3"); function Change(n){ a = n.area.selectedIndex; for(i=0;i < 3;i++){ n.country.options[i].text=no[a][i]; } } </script> <form> <select name="リストボックス1" onchange="Change(this.form)"> <option selected="selected">例1 <option>例2 <option>例3 <option>例4 </select> <select name="リストボックス2" size="1"> <option selected="selected">sample1 <option>sample2 <option>sample3 </select> </form> この際に、2つ目のリストボックスで値が選択された 時点で、指定のURLに飛ぶようにしたいのですが、 URLをどこに指定していいのかわかりません。 ご存知の方、宜しくお願いします！

  • テキストボックスとセレクトボックスの選択肢の連携

    この度はお世話になります。 １個のテキストボックスに入力された文字列により、その後の１個の セレクトメニューの選択肢を変更することってできるのでしょうか？ 具体的には以下のような動作です。 ・デフォルトではテキストボックスに文字列が入力された場合は、 　その後のセレクトボックスには「トマト、きゅうり、ほうれんそう」 　の選択肢が入る。 ・テキストボックスに「あいうえお」と入力された時のみ、その後の 　セレクトボックスが「りんご、みかん、ぶどう」の選択肢に変わる。 ・テキストボックスに「かきくけこ」と入力された時のみ、その後の 　セレクトボックスに「あじ、さば、かつお」の選択肢に変わる。 こんな感じですが、よろしくお願い致します。 当方、只今javascriptを勉強しており、条件式に苦戦しております。 サンプルプログラムを見せていただけるとありがたく思います。

  • リストボックスを使って検索フォームを作りたいのですが

    教えて！ｇｏｏの質問フォームのようなものが作りたいのですが出来なくて困っています。 リストボックスを２つ設けて、最初のリストボックスから選んだ項目によって、次のリストボックスに表示させる項目を選択したいのですが。 例えば、下のlist1のリストボックスから「名前」を選んだ場合にはlist2のリストボックスに氏名を、「日付」を選んだ場合には日付をリストに表示したいですが．．． <SELECT name="list1"><OPTION value=default>検索項目</OPTION> <option value=name>名前</option>); <option value=date>日付</option>); <option value=team>チーム</option>); </SELECT> <SELECT name="list2"><OPTION value=default>氏名</OPTION> <option value=suzuki>鈴木</option>); <option value=sato>佐藤</option>); <option value=tanaka>田中</option>); </SELECT> <SELECT name="list2"><OPTION value=default>日付</OPTION> <option value=2004>2004年度</option>); <option value=2003>2003年度</option>); <option value=2002>2002年度</option>); </SELECT> 書き方や説明が分かりにくいかもしれませんが、よろしくお願いします。

    • ベストアンサー
    • PHP
  • web上のリストボックス作成

    あるHTMLで、リストボックスをDREAMWEAVERでさくせいしました。 リストを選択すると、選択された名前のHTMLに飛ぶように指定したのですが、 ネスケでは動いてくれるのですが、IEでは飛んでくれません. 原因を教えてください。以下のようなHTMLです。 このためのCGIはくんでいません。 <form name="form2"> <select name="month"onChange="MM_jumpMenu('parent',this,0)"size="0"multiple> <option value="1.html">　１　</option> <option value="2.html">　２　</option> <option value="3.html">　３　</option> <option value="4.html">　４　</option> <option value="5.html">　５　</option> </select> </form>

    • ベストアンサー
    • HTML
  • プルダウン Or コンボボックスを選択したら、テキストボックスを入力不可にさせる方法　

    フォーム制御として、JavaScriptを使用して、プルダウンよりある項目が選択されたと同時に、あるテキストボックスの入力を不可、またはmaxlengthを0にしたいのですが、思うように出来ません。 maxlengthをvalue等に変更させたら値は変更されたので、 関数としての動きは問題なさそうです。 どなたか、ご教授お願いいたします。 ※現在下記のソースは、list番号を指定していません。 <script language="JavaScript"> <!-- function MM_jumpMenu(){ parent.document.form1.text1.maxlength=0; } //--> </script> <form name="form1" method="post" action=""> <select name="menu1" onChange="MM_jumpMenu()"> <option selected>unnamed1</option> <option>unnamed2</option> </select> <input type="text" name="text1" maxlength="10"> </form>

  • リストボックスの複数選択について

    ACCESS2003を使っています。 入力用フォームにリストボックスを作って 複数選択するようプロパティで変更しました。 この情報をテーブル上に反映させることができません。 どうしたらいいのかお教えください。 具体的には 入力用フォームに りんご（＊） みかん かき（＊） スイカ　　　（＊）印は黒反転 この状態で入力するとテーブル上に りんご　かき というように表示するようにしたいのです。

  • リストボックスを連動させて・・・

    <SCRIPT language=JavaScript> function set(){ ★ここが混乱状態 } </SCRIPT> <select name="s1" onChange="set()"> <OPTION SELECTED>↓【選択して下さい】</OPTION> <OPTION>big</OPTION> <OPTION>small</OPTION> </SELECT> <select name="s2" onChange="set()"> <OPTION SELECTED>↓【選択して下さい】</OPTION> <OPTION>red</OPTION> <OPTION>white</OPTION> </SELECT> リストボックス選択前のページが test.cgi?hinmei=denwa だとします。 上部のリストボックスを選択すると test.cgi?hinmei=denwa&s1=big と変わり さらに下部のリストボックスを選択すると test.cgi?hinmei=denwa&s1=big&s2=red と変わり さらに上部のボックスを変更すると test.cgi?hinmei=denwa&s1=small&s2=red のように変動させるものを作りたいのですが・・・。 ＃これに取り組んで相当時間を費やしていますが、能力が足りません。 ＃質問の仕方に自信なし (^^;

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する