- 締切済み
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をどこに指定していいのかわかりません。 ご存知の方、宜しくお願いします！
- mihomama84
- お礼率73% (91/124)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- OKwebb
- ベストアンサー率44% (92/208)
<select 省略 onchange="location.href='http://aaa.bbb.ccc/'"> とか・・・。 JavaScriptのメソッドを新たに作ってそこで呼んでもいいし・・・。
関連するQ&A
- Javascriptの動的リスト作成について
Javascriptの動的リスト作成について お世話になっています。 Javascriptで選択リストを動的に変えたいと思っています。 また、Javascriptで作成したリストは、multipleとして複数選択できるようにしたいと考えています。 そこで、下記のようにスクリプトを書きました。リスト２(smallwheretag)が1つのみ選択を許すときは、うまくいったのですが、multipleにするためにnameを配列にしたところ、うまくリストが作成できなくなってしまいました。 なにかスクリプトに変更が必要なのでしょうか？ご教授お願いいたします。 <HTML部> <select name="bigwheretag[]" onchange="javascript:listChange(this.value);"> <option value="">検索項目</option> <option value="11%">自然</option> <option value="12%">街</option> <option value="13%">家庭</option> </select> <select name="smallwheretag[]" multiple> <option value="">大項目を選択して下さい</option> </select> <Javascript部> var where1_text = new Array("川", "海", "山", "滝", "その他"); var where1_value = new Array("1101", "1102", "1103", "1104", "1199"); flag1 = document.form.bigwheretag.value; if (flag1=="11%") { document.form.smallwheretag.length = where1_text.length; for(var i=0; i<where1_text.length; i++) { document.form.smallwheretag.options[i].text = where1_text[i]; document.form.smallwheretag.options[i].value = where1_value[i]; } }・・・・・・・・以下同様
- ベストアンサー
- JavaScript
- リストボックス全選択について
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
- リストボックスを連動させて・・・その２
直前の質問で下記の回答をいただいたものです。 質問では２つのリストボックスを連動させたサンプルの回答をいただきましたが、ひょっとして、リストボックスの個数が何個でも対応させることはできないでしょうか。つまり、リストボックスのnameなどをscript部分に記さずに・・。 ここまでサンプルをもらっても改造できないので質問。 (^^; ■JavaScript <SCRIPT language=JavaScript> <!-- strBase = "test.cgi?hinmei=denwa "; strS1 = "&s1="; strS2 = "&s2="; function set(){ strS1b = strS1 strS2b = strS2 if (document.form.s1.options[document.form.s1.selectedIndex].value) strS1b += document.form.s1.options[document.form.s1.selectedIndex].value; if (document.form.s2.options[document.form.s2.selectedIndex].value) strS2b += document.form.s2.options[document.form.s2.selectedIndex].value; strURL = strBase + strS1b + strS2b; document.form.text.value = strURL; } //--> </SCRIPT> ■フォーム <FORM NAME="form"> <select name="s1" onChange="set()"> <OPTION VALUE="" SELECTED>↓【選択して下さい】</OPTION> <OPTION VALUE="big">big</OPTION> <OPTION VALUE="small">small</OPTION> </SELECT> <select name="s2" onChange="set()"> <OPTION VALUE="" SELECTED>↓【選択して下さい】</OPTION> <OPTION VALUE="red">red</OPTION> <OPTION VALUE="white">white</OPTION> </SELECT> <INPUT TYPE="text" SIZE=50 NAME="text"> </FORM>
- ベストアンサー
- JavaScript
- リストボックスで指定されたデータの取得
リストボックスに幾つかのデータ(アイテム)を選択した後、 あるボタンを押したら、メッセージボックスを出力し、選択された データ(アイテム)を表示したいのですが、ｽｸﾘﾌﾟﾄではどのように 記述すればよろしいのでしょうか？ サンプルは以下の通りです。 <html> <head></head> <SCRIPT LANGUAGE="JavaScript"> <!-- function MODORU( ) { alert(この部分をどう記述したらよろしいのでしょうか？); window.close( ); } //--> </SCRIPT> <body> <form name="fr01"> <table border="0"> <tr> <td> <select size="5" name="D1"> <option>標準</option> <option selected>端子箱右</option> <option>端子箱上</option> <option>両軸</option> <option> </option> </select> </td> </tr> </table> <INPUT ONCLICK="MODORU()" TYPE="button" VALUE="転写" name="B3"> </form> </body> </html>
- ベストアンサー
- その他（インターネット・Webサービス）
- ２つのコンボボックスの連携
以前このカテゴリで「一方のコンボボックスの選択によりもう一方のコンボボックスの項目を絞り込む」スクリプトを拝見させていただいたのですが、次のとおり作成すると「な行」を選択すると「え」と「な」が選択項目として現れてしまいます。 どこかおかしいところがあるのでしょうがさっぱりわかりません。どなたか教えてください。よろしくお願いします。 ------------------------------------------------ <html> <head> <title>OK WEB</title> <script type="text/javascript"> <!-- txt = {}; txt["1"] = new Array("あ","い","う","え","お"); txt["2"] = new Array("か","き","く","け","こ"); txt["3"] = new Array("さ","し","す","せ","そ"); txt["4"] = new Array("た","ち","つ","て","と"); txt["5"] = new Array("な"); function initMenu(){ var i; for (i=0; i<txt["1"].length; i++){ document.FORM1.MENUB.options[i] = new Option(txt["1"][i],txt["1"][i]); } } function setSubMenu(area){ var i; for (i=0; i<document.FORM1.MENUB.length; i++){ document.FORM1.MENUB.options[i] = null; } for (i=0; i<txt[area].length; i++){ document.FORM1.MENUB.options[i] = new Option(txt[area][i],txt[area][i]); } } // --> </script> </head> <body onload="initMenu()"> <form name="FORM1"> <select name="MENUA" onchange="setSubMenu(this.value)"> <OPTION VALUE="1">あ行 <OPTION VALUE="2">か行 <OPTION VALUE="3">さ行 <OPTION VALUE="4">た行 <OPTION VALUE="5">な行 </select> <br> <select name="MENUB" > <OPTION VALUE="あ">-- </select> </form> </body> </html>
- ベストアンサー
- JavaScript
- firefoxでjavascriptが…
現在、二つのセレクトボックス間でデータのやり取りをするjavascriptを製作しております。ieでは問題なく動作するのですが、firefoxだと セレクトボックスの移動ボタンを押すと余計なものまで消えてしまいます。どなたかご教授ください。 javascript↓ var master_selected_value; var master_selected_text; var user_selected_value; var user_selected_text; function select_master(a){ master_selected_text = a.master_list.options[a.master_list.selectedIndex].text; master_selected_value = a.master_list.options[a.master_list.selectedIndex].value; } function select_user(a){ user_selected_text = a.select_list.options[a.select_list.selectedIndex].text; user_selected_value = a.select_list.options[a.select_list.selectedIndex].value; } function portlet_move(a,b,c){ if( 1 == b ){ var sw = 0; for( n = 0 ; n < a.select_list.length ; n ++ ){ if( a.select_list.options[n].text == master_selected_text){ sw = 1; } } if( sw == 0 && master_selected_text != null ){ a.select_list.options[a.select_list.length] = new Option(master_selected_text,master_selected_value); } }else{ if( null != user_selected_text ){ for( n = a.select_list.selectedIndex ; n < a.select_list.length - 1; n ++ ){ a.select_list.options[n] = a.select_list.options[n + 1]; } a.select_list.length = a.select_list.length - 1; } user_selected_text = null; user_selected_value = null; } } function data_sum(a,b){ var buff = ""; for( n = 0 ; n < a.select_list.length ; n ++ ){ buff = buff + a.select_list.options[n].value; } a.select_list_data.value = buff; a.type.value = b; a.submit(); } function data_send(a,b){ var buff = ""; for( n = 0 ; n < a.select_list.length ; n ++ ){ buff = buff + a.select_list.options[n].value; } a.select_list_data.value = buff; a.type.value = b; a.send.value = "true"; a.submit(); } html↓ <form method="post" action="test.php" onsubmit="return moveItemSelect('ListBox1','ListBox2');"> <input type="hidden" name="type" value=""> <input type="hidden" name="select_list_data" value=""> <input type="hidden" name="send" value=""> <table> <tr> <td> <select name="type" onchange="data_sum(this.form,'recommended');"> <option value="a" selected="selected">a</option> <option value="b">b</option> </select> </td> <td></td> <td></td> </tr> <tr> <td> <select size="10" name="master_list" onchange="select_master(this.form);"> <option value="1">1</option> <option value="2">2</option> </select> </td> <td> <input type="button" class="button" value="→" onclick="portlet_move(this.form,1,2);"> <br /> <input type="button" class="button" value="←" onclick="portlet_move(this.form,2,1);"> </td> <td> <select size="10" name="select_list" onchange="select_user(this.form);"> <option value="1">1</option> </select> </td> </tr> <tr> <td colspan="3"><input type="button" class="button" value="登録" onclick="data_send(this.form,'recommended_write');" /></td> </tr> </table> </form>
- ベストアンサー
- JavaScript
- リストボックスの４連
先日も質問したものなんですがお願いします。 リストボックスで検索すると結果いくつもあるのですが、 いずれもセレクトボックスの様です。 私が教えてほしいのは、リストボックスから選択した項目を次のリストボックス、更に選択し次のリストボックスに・・・と３連続した結果、４番目のリストボックスに答えを表示したいのですが分かりません。 いろいろ調べてこんなのがありましたので引用させていただきましたがこれは２番目で結果が表示します。このソースをいろいろ変更したりしてみたんですが、うまくいきません。どなたか教えてくださいお願いします。 これ以外でも結構です。 <html lang="ja"> <head> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>sample</title> <style type="text/css"> select { width: 100px; } </style> <script type="text/javascript"> //左リスト用連想配列 //キーは0からの連番にして下さい。アイテムが左リストのテキストになります。 var l_Array = { '0' : '大阪', '1' : '京都', '2' : '兵庫', '3' : '奈良', '4' : '滋賀' } //右リストボックス用連想配列 //左リストのvalueをキーにします。 //アイテムはカンマで区切れば幾つにでも出来ます。 var r_Array = { '0' : 'たこ焼き,通天閣', '1' : 'やつはし,清水寺', '2' : '明石焼き,甲子園', '3' : '奈良漬,法隆寺,せんとくん,まんとくん', '4' : '鮒寿司,琵琶湖' } //左リストのオプション群をhtmlソース中に //直接書くのであれば、この関数は実行不要です。 function makeLeft() { var sel = document.getElementById('l_sel'); var i; for (i in l_Array) { var opt = document.createElement('OPTION'); opt.setAttribute('value', i); var tn = document.createTextNode(l_Array[i]); opt.appendChild(tn); sel.appendChild(opt); } } //この関数で右側のアイテムを入替えてます。 //右リストのvalueは、左リストのvalue+0からの連番となります。 function repRight(e) { var sel = document.getElementById('r_sel'); while (sel.hasChildNodes()) { sel.removeChild(sel.firstChild); } var tgt = e.target || e.srcElement var optArray = r_Array[tgt.value].split(','); for (var i = 0; i < optArray.length; i++) { var opt = document.createElement('OPTION'); opt.setAttribute('value', '' + tgt.value + i); var tn = document.createTextNode(optArray[i]); opt.appendChild(tn); sel.appendChild(opt); } } </script> </head> <body onload="makeLeft();"> <!-- makeLeftを実行しない場合は <body> とする --> <table> <tr> <td> <form name="l_frm" id="l_frm"> <select name="l_sel" id="l_sel" size=10 onchange="repRight(event);"> <!-- <option value="0">大阪</option> <option value="1">京都</option> <option value="2">兵庫</option> <option value="3">奈良</option> <option value="4">滋賀</option> --> </select> </from> </td> <td> <form name="r_frm" id="r_frm"> <select name="r_sel" id="r_sel" size=10> </select> </from> </td> </tr> </table> </body> </html>
- ベストアンサー
- JavaScript
- JavaScriptのセレクトボックスの連動について
JavaScriptにて連動するセレクトボックスを作成しました。 ソースは下記となります。 ==================================================== <html> <head> <title>複数のSELECT タグ連動</title> <script type="text/javascript"> <!-- function selectBox(n){ var idParent='parent_'+n; var idChild='child_'+n; document.getElementById(idChild).length=1; document.getElementById(idChild).selectedIndex=0; var child = childArray[document.getElementById(idParent).selectedIndex]; document.getElementById(idChild).length=child.length; for(var i=0;i < child.length;i++){ document.getElementById(idChild).options[i].text = child[i]; } } var childArray = new Array(); childArray[0]=new Array("渋谷区","品川区","港区","新宿区"); childArray[1]=new Array("横浜市","川崎市","厚木市","小田原市"); childArray[2]=new Array("静岡市","浜松市","三島市","焼津市","清水市"); // --> </script> </head> <body> <form name="myform" method="POST" action"#"> <select id="parent_0" onchange="selectBox(0)"> <option>東京都</option> <option>神奈川県</option> <option>静岡県</option> </select> <select id="child_0"> <option>渋谷区</option> <option>品川区</option> <option>港区</option> <option>新宿区</option> </select> <br /> <select id="parent_1" onchange="selectBox(1)"> <option>東京都</option> <option>神奈川県</option> <option>静岡県</option> </select> <select id="child_1"> <option>渋谷区</option> <option>品川区</option> <option>港区</option> <option>新宿区</option> </select> <br /> <select id="parent_2" onchange="selectBox(2)"> <option>東京都</option> <option>神奈川県</option> <option>静岡県</option> </select> <select id="child_2"> <option>渋谷区</option> <option>品川区</option> <option>港区</option> <option>新宿区</option> </select> <br /> </form> </body> </html> ==================================================== 上記のソースで想定の動きをしてくれているのですが、 例えば、 神奈川県 小田原市 と選択し、ブラウザの更新をかけると、 神奈川県 渋谷区 になってしまいます。 ブラウザの更新をかけた際に、 双方のセレクトボックスを初期状態にするには、どうしたらよいでしょうか？ よろしくお願いします。
- ベストアンサー
- JavaScript
- リストボックスの内容追加と削除
質問QNo.172288を参考にプログラムを作成しました。 そこで下記のような処理をしたいのですがどのように処理をしていいのか解りません。 Bというリストボックスの値を「追加」ボタンを押すとAのリストボックスに追加するときにBのリストボックスより選択した値は削除（非表示）あるいはAのリストボックスに既に存在する同じ値はAリストボックスには追加しない。（重複チェックみたいな感じです） それと、Aというリストボックスの値を「戻す」ボタンを押すと選択されている値をAのリストボックスより削除し、Bのリストボックスに表示させる JavaScriotでは難しいいですか。ご教授いただけないでしょうか 宜しくお願いします <form name=frm method=post action=/beta/index.php> <td align=right> <select name=A size=8 multiple> <option value=""></option> </select> </td> <td align=center> <input type=button value="← 追加" onClick="addItem();"> <p> <input type=button value="戻す →" onClick="delItem();"> <td align=left> <select name=B size=8 multiple> <option>AAAAA</option> <option>BBBBB</option> <option>CCCCC</option> </select> </td> function addItem() { A = document.frm.A; B = document.frm.B; for (var i=0; i<B.options.length; i++) { if (B.options[i].selected) { A[A.options.length] = new Option(B.options[i].text,B.options[i].value); } } } function delItem() { B = document.frm.A; A = document.frm.B; for (var i=0; i<B.options.length; i++) { if (B.options[i].selected) { A[A.options.length] = new Option(B.options[i].text,B.options[i].value); } } }
- ベストアンサー
- JavaScript
- コンボボックスのリンク先にフレームを指定したい
コンボ1に連動してコンボ2の内容を変更し コンボ2からリンクしているファイルを別フレームに表示したいです。 また、リンク先にアンカーを指定したいです。 宜しくお願いいたします。 以下の設定で試みましたが、NGでした。 ------------------------------------------------ ◆index.html <html> ～省略～ <frameset rows="120,*" border="0" framespacing="0" frameborder="no"> <frame src="header.html" name="head" noresize scrolling="no"> <frame src="data1.htm" name="main" noresize> ～省略～ </html> ------------------------------------------------ ◆header.html <HTML> <HEAD> <META http-equiv="content-type" content="text/html;charset=x-sjis"> <TITLE>連動コンボ</TITLE> </HEAD> <BODY bgcolor="#ffffff"> <P> <FONT size="2">連動コンボ</FONT></FONT><BR> <FORM METHOD=POST name=doublecombo> <P> <!-- --><SELECT name="example" ID="example" onchange="redirect(this.options.selectedIndex)" size="1"> <OPTION SELECTED>選択 <!--group1--> <OPTION>データ1 <!--group2--> <OPTION>データ2 </SELECT><SELECT name="stage2" ID="stage2"> <OPTION SELECTED VALUE="">- <INPUT type=BUTTON name="test" VALUE="適用" ID="test" onclick="go()"><BR> <SCRIPT> <!-- var groups=document.doublecombo.example.options.length var group=new Array(groups) for (i=0; i<groups; i++) group[i]=new Array() group[1][0]=new Option("data1-1","1-1.html")←●1-1.html#page1 のようにアンカーを指定したい group[1][1]=new Option("data1-2","1-2.html") group[1][2]=new Option("data1-3","1-3.html") group[2][0]=new Option("data2-1","2-1.html") group[2][1]=new Option("data2-2","2-2.html") group[2][2]=new Option("data2-3","2-3.html") var temp=document.doublecombo.stage2 function redirect(x){ for (m=temp.options.length-1;m>0;m--) temp.options[m]=null for (i=0;i<group[x].length;i++){ temp.options[i]=new Option(group[x][i].text,group[x][i].value) } temp.options[0].selected=true } function go(){ location=temp.options[temp.selectedIndex].value } //--></SCRIPT> </FORM></BODY> </HTML> ------------------------------------------------ ◆備考 header.htmlのfunction go()～を function go(){window.main.location= ～ にしてもNGでした。
- ベストアンサー
- HTML
補足
早速のご回答ありがとうございます！ 私のご説明がわかりにくくて申し訳ないです！ URLで飛ぶようにしたいのは、 2つ目のリストボックスの中身なので、 下の "sample1" "sample2"などを選んだときに、 指定のとび先に飛ばしたいのです・・・。 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"); もしお分かりになるようでしたら、 ご教授ください！ 宜しくお願いします！