• 締切済み

リスト値を変更したときに連動して他の値を変えたいのですが

おはようございます。 JavaScriptの質問です。 ボタン１とテキストボックスとリストボックスがあり、 ボタン1を押すとリストボックスの選択行を0にして テキストボックスに選択した行の行数を出そうとしています。 リストボックスを手動で変更した場合は リストボックスの値が表示されるのですが ボタンによってリストボックスの値が変わったときに テキストの値を変えることはできないのでしょうか？ 以下ソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>JAVATEST</TITLE> </HEAD> <BODY > <P align="center"><B>TEST<BR> </B></P> <P align="center"><BR> </P><center> <script language="javascript"> <!-- function ChangeTxt() { if (document.getElementById("List").selectedIndex=="0"){ document.getElementById("txtText").value="SUCCESS"; }{ document.getElementById("txtText").value=document.getElementById("List").selectedIndex; } } function ChangeListID() { document.getElementById("List").selectedIndex="0"; } //--> </script> <FORM name="frmForm"><INPUT type="button" ID="button1" name="btnGo" value="TEST" onClick= "ChangeListID()"> <INPUT size="20" type="text" ID="txtText" name="txtText" onChange= "ChangeTxt()"> <tr> <TD align="right"><FORM><SELECT name="List" id="List" onChange="ChangeTxt()"> <OPTION value="1">Item1</OPTION> <OPTION value="2">Item2</OPTION> <OPTION value="3">Item3</OPTION> </SELECT></FORM></TD></tr> </FORM> </center> </BODY> </HTML> どなたかおわかりになる方よろしくお願いします。

みんなの回答

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

プログラムでListの値を変更してもonChangeメソッド はトリガーとして発動しません。 いくつかやり方があると思いますが、この場合、 単純にChangeListIDでChagenTxt()を呼び出すのが 妥当ではないでしょうか function ChangeListID(){ document.getElementById("List").selectedIndex=0; ChangeTxt(); }

pokepotto
質問者

お礼

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

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

関連するQ&A

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

    直前の質問で下記の回答をいただいたものです。 質問では２つのリストボックスを連動させたサンプルの回答をいただきましたが、ひょっとして、リストボックスの個数が何個でも対応させることはできないでしょうか。つまり、リストボックスの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>

  • 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
  • リストボックスからジャンプさせた後のフォーカス

    リストボックスで選択してＵＲＬに飛ばしていますが、元のページのリストボックスのアイテムが選択状態になっていているので、そのフォーカスをなくすにはどうしたらいいでしょうか。 function menujump_flm(targ,selObj,restore){ if(targ=="_blank"){ window.open(selObj.options[selObj.selectedIndex].value,"_blank"); } else { eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'"); } [selObj.selectedIndex].value+"'"); } <select name="sl" onChange="menujump_flm('_blank',this,1)"> <OPTION value="***">文書1</OPTION> <OPTION value="***">文書2</OPTION> <OPTION value="***">文書3</OPTION> </SELECT>

  • メールフォーム内の自動計算　valueの値を2つの目的で使いたい

    以下の様な形で、自動計算フォームを作っています。 金額は「value="　"」から計算されているのですが、この部分は同時に使おうと思っているメール送信の商品名の部分にあたります。 このまま送信してしまうと、商品名が数字だけになってしまうのですが、何かよい方法をご存知でしょうか・・・。 メール送信のプログラムは私の方では変えられないので、出来れば以下の自動計算フォームを変える事で解決できたらと思っています。 javascriptは専門ではないのですが、こつこつ勉強中です。よろしくお願いいたします。 -------------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <script type="text/javascript"> <!-- function cal(){ var price1 = document.mail_form.goods1.options[document.mail_form.goods1.selectedIndex].value; var price2 = document.mail_form.goods2.options[document.mail_form.goods2.selectedIndex].value; var total = parseInt(price1) + parseInt(price2); document.mail_form.field_total.value = total; // 合計 } // --> </script> </head> <body> <form name="mail_form"> <p id="mail-form-box1"> ●商品１<br /> <select name="goods1" onChange="cal()"> <option value="100">バッグA 100円</option> <option value="200">バッグB 200円</option> <option value="300">バッグC 300円</option> </select> </p> <p id="mail-form-box2"> ●商品２<br /> <select name="goods2" onChange="cal()"> <option value="100">靴A 100円</option> <option value="200">靴A 200円</option> <option value="300">靴A 300円</option> </select> </p> 合計: ＄<input type="text" name="field_total" value="0"><BR> </form> </body> </html> --------------------------------------------------------

  • セレクトメニューの4連動

    いつも参考にさせて頂いております。 javascript初心者です。 現在、javascriptにてセレクトメニューの4連動を作成しているのですが、4つ目のセレクトメニューを正常に動かすことが出来ません・・・。何とか3つまでは動くようになったのですが・・・。忙しいところを申し訳ありませんが、教えて下さい。 一つ目のセレクトで、地域の選択 二つ目のセレクトで、県の選択 三つ目のセレクトで、「プレイスポット」か「食事」の選択 四つ目のセレクトでは、 プレイスポット名(三つ目でプレイスポット選択時) お店名(三つ目で食事選択時) 上記したようにしたいのです。宜しくお願いします。 <html> <head> <script type="text/javascript"> <!-- var area=0; function setA(n) { aa=n; data1 = [ ["東京","神奈川"], ["大阪","神戸"], ]; len = document.form1.box_a.options.length; for(i=len-1; i>0; --i) document.form1.box_a.options[i] = null; if(n!=0) { document.form1.box_a.style.visibility = "visible"; for(i=0; i<data1[n-1].length; i++) document.form1.box_a.options[i+1] = new Option(data1[n-1][i]); } setB(0); } function setB(n) { data2 = [ [["プレイスポット","食事"],["プレイスポット","食事"]], [["プレイスポット","食事"],["プレイスポット","食事"]] ]; len = document.form1.box_b.options.length; for(i=len-1; i>0; --i) document.form1.box_b.options[i] = null; if(n==0)return; document.form1.box_b.style.visibility = "visible"; for(i=0; i<data2[aa-1][n-1].length; i++) document.form1.box_b.options[i+1] = new Option(data2[aa-1][n-1][i]); setC(0); } function setC(n) { data3 = [ [[["としまえん","よみうりランド"],["キハチ","久兵衛"]]], [[["江ノ島","鎌倉"],["カレーミュージアム","中華街"]]], [[["ユニバーサルスタジオ","天王寺動物園"],["かに道楽","金龍ラーメン"]]], [[["須磨海浜水族園","グリコピア"],["コンチェルト","六甲山牧場"]]] ]; len = document.form1.box_c.options.length; for(i=len-1; i>0; --i) document.form1.box_c.options[i] = null; if(n==0)return; document.form1.box_c.style.visibility = "visible"; for(i=0; i<data3[aa-1][n-1][n-1].length; i++) document.form1.box_c.options[i+1] = new Option(data3[aa-1][n-1][n-1][i]); } //--> </script> </head> <body> <form name="form1"> <select name="sel1" onChange="setA(this.selectedIndex)"> <option value="0" selected>▼選択してください</option> <option value="1">関東</option> <option value="2">関西</option> </select> <select name="box_a" onChange="setB(this.selectedIndex)"><option value="0" selected>---------------</option></select> <select name="box_b" onChange="setC(this.selectedIndex)"><option value="0" selected>---------------</option></select> <select name="box_c" onChange=""><option value="0" selected>---------------</option></select> </form> </body> </html>

  • netscapeでうまくいかない

    次のようなJavascriptを使ったページを作ったところ、IEではうまく表示、更新されるのですが、Netscapeでは更新しようとすると、selectの中身がなくなってしまいました。IEとNetscapeでソースを見たところ、次のようにBODYの中が変化していました。どなたか、対策を教えていただけませんでしょうか。 IEのソース <body> </p><form name="form1" method="GET" action="list.cgi"> <p align=right> <strong>表示形式</strong> <select name="list" onChange="getAction()"> <script language="JavaScript"> <!-- lists = getCookie("LISTADD"); switch(lists){ case "": document.write("<option value=\"num:hl\" selected>リスト順［新→旧］</option>"); document.write("<option value=\"num:lh\">リスト順［旧→新］</option>"); break; case "num:hl": document.write("<option value=\"num:hl\" selected>リスト順［新→旧］</option>"); document.write("<option value=\"num:lh\">リスト順［旧→新］</option>"); break; case "num:lh": document.write("<option value=\"num:hl\">リスト順［新→旧］</option>"); document.write("<option value=\"num:lh\" selected>リスト順［旧→新］</option>"); break; } //--> </script> </select> </p> </form> </body> Netscapeのソース <body> </p><form name="form1" method="GET" action="list.cgi"> <p align=right> <strong>ノスシィキチシー</strong> <select name="list" onChange="getAction()"> <OPTION value="num:hl" selected>リスト順［新→旧］</OPTION> <OPTION value="num:lh">リスト順［旧→新］</OPTION> </SELECT> </P> </FORM> </BODY> </HTML>

  • VBScriptでHTMLのセレクトボックスで表示されている値に指定したい

    VBScriptでHTMLのセレクトボックスで表示されている値(value)に指定したいと思っています。どのようにすればよいのでしょうか？詳しくは下記参照。 もし、VBSで無理であるのならほかの言語で可能な言語を教えていただきたく思います。 例：”value_1”を指定してVBSで選びたい <select name="select_name" onchange="select_onchange"> <option value="value_1">value_1_1</option> <option value="value_2">value_2_2</option> </select> (注意) 下記のように位置情報で指定するのではなく、valueの値(value_1)や表示されている値(value_1_1)でしたいと思っています。 IEオブジェクト.Document.フォーム名.コンボボックス名.selectedIndex = 0からの番号

  • for文についてご教授ください

    javascriptを学習しています。初級者のためご教授のほどお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <script> function kazu(){ var fObj = document.itemlist; var price1 = fObj.item1.options[fObj.item1.selectedIndex].value; var price2 = fObj.item2.options[fObj.item2.selectedIndex].value; var total = parseFloat(price1) + parseFloat(price2); document.getElementById("total").value = total; } </script> </head> <body> <header> <form action="#" name="itemlist" > <table> <tr> <td> <select name="item1" onchange="kazu()"> <option value="100">itemA-1</option> <option value="200">itemA-2</option> </select> </td> </tr> <td> <select name="item2" onchange="kazu()"> <option value="1000">itemB-1</option> <option value="2000">itemB-2</option> </select> </td> </tr> <tr> <td name="total"> <input type="text" value="" id="total" /> </td> </tr> </table> </form> </body> </html> 上記の内容をfor文を使い動作するようにと思っています。 自分で以下の内容を考えたのですがが動作しません。 以下の内容の問題点を教えいただければと思います。なにとぞよろしくお願いいたします。 function kazu(){ var fObj = document.itemlist; var len = document.itemlist.length; for(i=1;i<=len;i++){ var price[i] = fObj.item[i].options[fObj.item[i].selectedIndex].value; } var total = parseFloat(price1) + parseFloat(price2); document.getElementById("total").value = total; }

  • リストボックスと連動したテキストボックスについて

    お世話になります。よろしくお願いいたします。 セレクトボックスを変更すると、頭のテキストボックスの値が変更するようなホームページを作りたいと思っています。（下：画面例） -------------------------------------- カテゴリーA [OK]　商品A1　配送方法：［　飛行機　5日　▼］ [NO]　商品A2　配送方法：［　船　　 20日　▼］　 [NO]　商品A3　配送方法：［　トラック9日　▼］ カテゴリーB [NO]　商品B1　配送方法：［　船　　 20日　▼］ [NO]　商品B2　配送方法：［　トラック9日　▼］　 [OK]　商品B3　配送方法：［　飛行機　5日　▼］ -------------------------------------- データが1つだけの場合には、 onChageを使って、 <html><head> <title>テスト</title> <script language="JavaScript"> <!-- function hantei(){ var idx = document.f1.p1.selectedIndex; var c1 = eval(document.f1.p1.options[idx].value); if ( c1>10 ) { document.f1.r1.value = "NO"; } else { document.f1.r1.value = "OK"; } } // --> </script> </head><body> <form name="f1"> <hr> 判定： <input size="10" type="text" name="r1"><br> <hr> 選択： <select name="p1" onChange="hantei();"> <option value="5" selected>飛行機</option> <option value="20">船</option> <option value="9">トラック</option> </select> </form> </body> </html> のように実現するところまではなんとか理解できたのですが、 ループさせて、上記のp1,r1,f1を各データ毎にp1,p2,p3...r1,r2,r3...f1,f2,f3...というように変化させた場合に 引数をhantei()に渡して、変数として処理する必要があると思うのですが、 どうにもうまくいきません。 お詳しい方がいらっしゃいましたら、教えていただけないでしょうか？ よろしくお願いいたします。

  • セレクトボックスでの結果で画像を変化させるモノを同ページに複数個表示する

    セレクトボックスの結果によって画像を変化させるものを作ったのですが、これが一つのみだと動作したのですが、"同じ条件"で複数個おく方法が分かりません。 ちなみに試したものです。（一つ目すら動作しませんでした。） <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- function changeImage(){ var imgnum = document.forms['myform'].elements['imgselect'].selectedIndex; document.images['myimg'].src = 'test01.jpg'; if(imgnum==0){ document.myimg.src="test01.jpg"; }else if(imgnum==1){ document.myimg.src="test02.jpg"; } } //--> </SCRIPT> </HEAD> <BODY> <CENTER> <!--1つめ--> <IMG src="test.jpg" name="myimg" border=0> <FORM name="myform"> <SELECT name="imgselect" onChange="changeImage(this.options[this.selectedIndex].value)"> <OPTION>イメージ1 <OPTION>イメージ2 </SELECT> </FORM> <!--２つめここから下を追加したことで動作しなくなりました--> <IMG src="test.jpg" name="myimg" border=0> <FORM name="myform"> <SELECT name="imgselect" onChange="changeImage(this.options[this.selectedIndex].value)"> <OPTION>イメージ1 <OPTION>イメージ2 </SELECT> </FORM> <!--ここまで--> </CENTER> </BODY> </HTML> ＊全く同じ条件のものを複数個並べたいのですが、ただ、「form」 と「画像」の項目を増やすだけではだめなのでしょうか？ 自分でもこれじゃまずいんじゃない？とは何となく思うのですが、細かな原因が分かりません。かなりの初心者です。どうすればうまくいくのでしょうか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する