- ベストアンサー
セレクトボックスの操作について（２）
セレクトボックスの操作について（２） 以前に http://okwave.jp/qa/q5887612.html にて質問させていただいたのですが、 また問題が発生してしまい、解決方法がわからなかったので、質問させていただきます。 上記アドレスのスクリプトで一つのセレクトボックスに対して、連動させる動きが 実現できたのですが、複数（同じような動きの違うID）のセレクトボックスに対して も動作できればと考えております。 どなたかご教授願えればと思います。 よろしくおねがいいたします。
- hunter_999
- お礼率19% (31/161)
- JavaScript
- 回答数2
- ありがとう数10
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
同じform内であれば、前回の#3様の回答がそのようになってますけれど？ var fuga = setSomeText( 'house_kouzou_a2', 'house_kouzou_b2', 'house_kouzou_c2' ); とか… 違うフォームの場合でも、forms[0]で決め打ちにしているあたりを修正すれば可能かと…
その他の回答 (1)
- himajin100000
- ベストアンサー率54% (1660/3060)
Q5887612の時に静観しつつ思っていたが、何故入力欄3つを同期させなければならないんだ？ 内容が同じものなら入力欄一つに変更不能な「表示用の要素」3つであるほうがいいんじゃないか？ #自分のブログで愚痴ってたら、「ガツンと言ったれ」と言われたので
関連するQ&A
- 複数の連動するセレクトボックスについて。
こんにちは。 以前もこちらでPHP＋mysqlについて質問させていただきました。 今、複数（3つ）の連動するセレクトボックスを作成しているのですが、一つ目と2つ目は正常にDBから値を読み込んできて、各セレクトボックスが連動することが可能となりましたが、3つ目のセレクトボックスの 初期値の値が、2つ目のセレクトボックスの値をDBへ問い合わせて変えない限り、そのまま残ってしまいます。どうすれば3つのセレクトボックスが連動するように解決するのでしょうか？？ よろしくお願いいたします。
- ベストアンサー
- PHP
- セレクトボックスの操作について
セレクトボックスの操作について ３つのセレクトボックスのうち、どれかを変更すると同じテキストのものに 残りの２つのセレクトボックスを変更したいと思っております。 同じテキストが無ければ<option value="">----------</option>をcheckedにしたいと 考えているのですが、どなたかご教授いただければと思います。 [変更したいhtml] <select name="house_kouzou_a" id="house_kouzou_a" class="a"> <option value="">----------</option> <option value="1">木造</option> <option value="2">鉄筋</option> </select> <select name="house_kouzou_b" id="house_kouzou_b" class="b"> <option value="">----------</option> <option value="1">木造</option> <option value="2">鉄筋</option> </select> <select name="house_kouzou_c" id="house_kouzou_c" class="c"> <option value="">----------</option> <option value="1">木造</option> <option value="3">鉄筋</option> <option value="4">その他</option> </select>
- ベストアンサー
- JavaScript
- セレクトボックスの連動処理について
PHPに投稿すべき内容かもしれませんが、 こちらに投稿します。以下URLを参考にセレクトボックスの 連動処理を実行させています。 やりたい事は以下になります。 ・PHPにてフォーム(親-子のセレクトボックス)を記載し、 親-子を連動させる仕組を複数作成する為です。 http://www.skuare.net/test/jdependent.html こちらのページに記載されている内容で、一つの関連付けされている セレクトボックス(親-子-孫)については、連動処理する事が確認できましたが、 例えば以下のように関連付けされているセレクトボックスが2つある時に 2個目のセレクトボックスの選択や表示がされません。 <TABLE> <select name="id" id="id" class="selectable"> <option value="">-- select --</option> <option value="1" title="flowers" >Flowers</option> <option value="2" title="animals" >Animals</option> </select> <select name="id2" id="id2" class="selectable"> <option value="">-- select --</option> <option value="1" class="flowers" title="sunflower" >Sunflower</option> <option value="2" class="flowers" title="rose" >Rose</option> <option value="3" class="animals" title="dog" >Dog</option> <option value="4" class="animals" title="cat" >Cat</option> </select> </TABLE> <TABLE> <select name="id" id="id" class="selectable"> <option value="">-- select --</option> <option value="1" title="flowers" >Flowers</option> <option value="2" title="animals" >Animals</option> </select> <select name="id2" id="id2" class="selectable"> <option value="">-- select --</option> <option value="1" class="flowers" title="sunflower" >Sunflower</option> <option value="2" class="flowers" title="rose" >Rose</option> <option value="3" class="animals" title="dog" >Dog</option> <option value="4" class="animals" title="cat" >Cat</option> </select> </TABLE> おそらくスクリプト記載部分の $(document).ready(function(){ $('#id2').dependent({ parent:'id',//親のid名 group: 'selectable' }); }); #id2辺りを触る必要があるのだとは思うのですが、 同じ内容のセレクトボックスをPHPに複数記載した時に、 どのようにスクリプトを変更する必要があるかが解らず 非常に困っております。どなたか教えていただければ 幸いです。 ※JavaScriptはまだ触り始めの為、初心者です。
- ベストアンサー
- JavaScript
- 複数の連動する同じ内容のセレクトボックスについて
こんばんわ。 よろしくお願いします。 複数の同じ内容のセレクトボックスが連動するモノを作りたいのですが、まったく解りません。 たとえば 初期値を『選択しない』とし、１～５までの値を選択出来るセレクトボックスが５つあるとします。 １つ目のセレクトボックスで『３』を選択したら、残りのセレクトボックスでは３を除いた１～５までの値を選択出来ます。 さらに２つ目のセレクトボックスで『２』を選択したら、残りのセレクトボックスでは２と３を除いた１～５までの値を選択出来きるといった、全てのセレクトボックスが連動した重複を許さないセレクトボックスを作りたいのですが、可能でしょうか？
- 締切済み
- JavaScript
- 連動させたいセレクトボックスについて。
こんにちは。DB＋PHPが初心者のものです。 前にもここで質問させていただきましたが、 自分なりにコードを書いてみたので コードの訂正、ご教授をよろしくお願いいたします。 セレクトボックス1には、[table 1]の、種類が入り れレクトボックス2には、[table 1]の種類に連動して、[table 2]の名前が選択できるようにする。 下記のようにソースを書いてみましたが、 table１の値は、セレクトボックスでちゃんと表示されますが、table2はセレクトボックスは表示されるものの、何も値がありません(T_T) 動きとしては、table1のセレクトボックスで選択したら、その項目をDBへ問い合わせ、その項目に対応した、DBに登録されているtable2の値を二つ目のセレクトボックスに表示させたいです。 <html> <body> <select name="mkoumoku"> <option selected>-------------</option> <?php //DB接続 $dbcon=mysql_connect("localhost","abcd","defg"); //DB選択 mysql_select_db("zozozo"); //table1を取得 $res=mysql_query("select distinct * from table1"); while ($rows=mysql_fetch_array($res)) { echo "<option value=\"".$rows['id']."\">".$rows['kind']."\n"; } echo "</select>"; ?> <select name="skoumoku"> <option selected>-------------</option> <? //table1に連動して項目を変えたいところのコード $res1=mysql_query("select * from table2 where key =$_POST[mkoumoku] order by id"); while ($rows=mysql_fetch_array($res1)) { echo "<option value=\"".$rows['id']."\">".$rows['name']."\n"; } //Dbクローズ mysql_close($dbcon); ?> </body> </html>
- ベストアンサー
- PHP
- AJAXでPHPの配列を用いたセレクトボックスの連動
AJAXでPHPの配列を用いたセレクトボックスの連動を行いたいと思っています。たとえば、 PHPで配列をセットしセレクトボックスを生成します。 1番目のセレクトボックスで1番目の項目を選択すると 2番目のセレクトボックスの内容が連動して変化する。 といった動きを目指しています。 2番目のセレクトボックスの内容もPHPで持って設定したいと考えています。 1番目のセレクトボックスのvalue値が2ならばajaxで通信して21から29までのkeyの配列を設定するという形式ですが。どのようにして良いかわかりません。 教えて下さい。
- ベストアンサー
- AJAX
- ２つのセレクトボックスを連動させたい
２つのセレクトボックスを連動させて、 片方の選択を変更すると、もう一方の選択できる範囲が限定されるようにしたい。 下記のようなソースでセレクトボックスを2つ表示させています。 jQueryを使用しています。 それぞれ「開始年」「終了年」という意味合いで、 取得する値から、「年の範囲」を決定するものです。「option」の「value」には、西暦の4桁の数字が入るようにしています。 そこで、「開始年」選択を変更させたときに、「終了年」のセレクトが開始年よりも古い年を選択できないように連動させたいのですが、何かいい方法はないでしょうか。 ※「送信」ボタンをクリックした際に、警告文を表示するのではなく、 ２つのセレクトを連動される形で実現させたいと考えております。 ↓↓【記述コード】---------------------------------------------- 開始年：<select name="year_start" id="feas_1_1"></select> <script type="text/javascript" src="jquery-1.11.1.js"></script> <script type="text/javascript"> //現在の年数オブジェクトを4桁で生成 var time = new Date(); var year = time.getFullYear(); var init_year = 1955; //1970年まで表示 for (var i = init_year; i <= year; i++) { if(i < 1989){ no = 1925; era = '昭和 '; }else{ no = 1988; era = '平成 '; } var s = i - no; if(s == 1){ s = '元'; } $('#feas_1_1').append('<option value="' + i + '">' + era + s +'年( '+ i+ '年)</option>'); } </script> 終了年：<select name="year_end" id="feas_1_2"></select> <script type="text/javascript"> //現在の年数オブジェクトを4桁で生成 var time = new Date(); var year = time.getFullYear(); var init_year = 1955; //1970年まで表示 for (var i = year; i >= init_year; i--) { if(i < 1989){ no = 1925; era = '昭和 '; }else{ no = 1988; era = '平成 '; } var s = i - no; if(s == 1){ s = '元'; } $('#feas_1_2').append('<option value="' + i + '">' + era + s +'年( '+ i + '年)</option>'); } </script>
- 締切済み
- JavaScript
- セレクトボックスとテキストボックスの連動について
セレクトボックスで質問事項を選ぶと、テキストボックスの中に選択した名称が表示される。ということをやりたく下記の様に設定しました。 <script> function hoge(obj){ var f=obj.form; var v=obj.options[obj.selectedIndex].value; var c=f.elements["comment"]; c.value+=v; obj.selectedIndex=0; } </script> <select name="質問事項1" onchange="hoge(this)"> <option value="selected">質問事項を選んでください</option> <option value=“質問1">質問1</option> <option value="質問2">質問2</option> <option value="質問3">質問3</option> </select> <textarea name="comment"></textarea> 現在発生している問題が1点あります。 セレクトボックスで質問を2回選ぶと、選んだ2つの結果がテキストボックス内に連続して表示されます。 例： 1回目 セレクトボックス内 「質問1」を選択 ↓ テキストボックス内 「質問1」が表示 2回目 セレクトボックス内 「質問2」を選択 ↓ テキストボックス内 「質問1質問2」と表示 2回目以降選んだ場合に前回の処理をクリアにして、1つのみ表示させたいと思うのですがどうやればいいのでしょうか。 よろしくお願いします。
- ベストアンサー
- JavaScript
- セレクトしたときに全て初期状態に戻ってしまいます。
こんにちは。 先日、こちらでご教授いただいた者です。 調べたのですが、その部分についてのいい方法が見つからなかったので、新たに質問させていただきました。 同一ページにテキストフォームと、 3つのセレクトボックスがあり、 その3つのセレクトボックスのうち、2つは連動しますが、残り一つは連動しないようにしたいのですが。 現状は、2つの連動するセレクトボックスを選ぶと 全てが初期状態（未選択の状態）になってしまいます。こちらでご教授いただいた方法を使い、 連動する部分で、onChangeイベントを使っています。 また連動する部分で、一つ目の選択肢を選んだときに、一度mysqlへ問い合わせ、2つ目の項目をmysqlからもってきて表示しています。 連動するセレクトボックスの操作をしたときに 他のテキストフォームや、セレクトボックスが初期状態に戻らないようにするには、どのように改良すればよろしいでしょうか？どうかご教授くださいませ。 よろしくお願いいたします。 WinXP mysql4.0 php4.2 Apache1.3
- ベストアンサー
- PHP
- セレクトボックスの内容に応じウインドウを書き換え、さらにセレクトボックスを設置したい
web上のjavascript入門ページなどを参照しながら学習中ですが詰まってしまいました。よろしくお願いします。 1. topページにセレクトボックスを設置。 2. セレクトされた内容に応じて、現在のウインドウを書き換えた後topページと同じセレクトボックスを設置。 3. 2を繰り返す。 このような動作をさせたいのですが、現在のウインドウを書き換えることは出来るのですがセレクトボックスを設置しようとするとエラーになります。 script_test01.htmlの内容 -------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> </head> <body> <script type='text/javascript' src='script_test01.js'> </script> <br> <form name='form_0'> <select onchange='rewrite()' name='sel_0'> <option>A or B</option> <option>A</option> <option>B</option> </select> </body> </html> -------------------------------------------------- script_test01.jsの内容 -------------------------------------------------- function rewrite() { var sel_in =document.form_0.sel_0.options.selectedIndex; var sel_name = document.form_0.sel_0.options[sel_in].text; document.write('<html>\n'); document.write('<head>\n'); document.write('<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">\n'); document.write("<script type='text/javascript' src='script_test01.js'>\n"); document.write("</script>\n"); document.write('</head>\n'); document.write('<body>\n'); document.write(sel_in,' : ',sel_name,'<br>\n'); /* ↓この部分がうまくいかない document.write('<br>\n'); document.write('<form name='form_0'>\n'); document.write('<select onchange='rewrite()' name='sel_0'>\n'); document.write('<option>A or B</option>\n'); document.write('<option>A</option>\n'); document.write('<option>B</option>\n'); document.write('</select>\n'); /* ↑この部分がうまくいかない document.write('</body>\n'); document.write('</html>\n'); } -------------------------------------------------- script_test01.jsのコメントアウトをはずすとエラーになります。 script_test01.js内でさらに自分自身を記述している部分辺りなど、なにかおかしなことをやっていのではという自覚はありますが、よくわかりません。 あわせて質問ですが、.htmlと.jsはEUCで作成しcharsetもEUC-JPを指定しています。 topページをブラウザのエンコードで確認すると当然「日本語[EUC]」となっていますが、セレクトボックス選択後書き換えられたページを確認すると、「Unicode」なっていますがなぜでしょうか？「日本語[EUC]」に出来ないでしょうか？
- ベストアンサー
- JavaScript
補足
ご回答ありがとうございます。 上記のスクリプトだと動作が違うのですが…