質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
C

C言語は、1972年にAT&Tベル研究所の、デニス・リッチーが主体となって作成したプログラミング言語です。 B言語の後継言語として開発されたことからC言語と命名。そのため、表記法などはB言語やALGOLに近いとされています。 Cの拡張版であるC++言語とともに、現在世界中でもっとも普及されているプログラミング言語です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

309閲覧

JavaScript select 連動 不具合

kujira

総合スコア14

C

C言語は、1972年にAT&Tベル研究所の、デニス・リッチーが主体となって作成したプログラミング言語です。 B言語の後継言語として開発されたことからC言語と命名。そのため、表記法などはB言語やALGOLに近いとされています。 Cの拡張版であるC++言語とともに、現在世界中でもっとも普及されているプログラミング言語です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/08/08 13:23

編集2017/08/09 07:02

初めて投稿します。
ずぶの素人で専門用語も解りません。関数なども想像の範囲でやりくりしております。
php,MySqlで会計帳簿を作っています。不便でも動くものは出来るのですが、
今まで、入力画面1で(勘定科目ごとに違う補助科目以外の)各項目を選択または記入し
入力画面2で勘定科目に属する補助科目を選択して、
確認画面3で決定、という流れでしたが、
入力画面1で勘定科目を選ぶと、それに連動する補助科目を選択・記入すれば、
確認画面2という流れになるため事務効率が上がるので改良中です。

いろいろの所からの寄せ集めで、以下のものを作りましたが、メインメニューの選択が預金・消耗品共、次のページのサブメニューは「文旦」になります。何処がおかしいのでしょうか?
下記のコードではデータベースからデータを読み出してselect文を作るところは省いてあります。
元のコードは、javascriptも
document.addEventListener('DOMContentLoaded', function() {
var allSubBoxes = document.getElementsByClassName("hojo");
以下の一連のものを同じページに2個書いてあります。が、両方が干渉したようには見えません。
hojo、pulldownset、kanjo、はそれぞれhojo2、pulldownset2、kanjo2、としてあります。

以上宜しくご指導下さい。

java

1<script type="text/javascript"> 2document.addEventListener('DOMContentLoaded', function() { 3 var allSubBoxes = document.getElementsByClassName("hojo"); 4 for( var i=0 ; i<allSubBoxes.length ; i++) { 5 allSubBoxes[i].style.display = 'none'; 6 } 7 var mainBoxes = document.getElementsByClassName('pulldownset'); 8 for( var i=0 ; i<mainBoxes.length ; i++) { 9 var mainSelect = mainBoxes[i].getElementsByClassName("kanjo"); 10 mainSelect[0].onchange = function () { 11 var subBox = this.parentNode.getElementsByClassName("hojo"); 12 for( var j=0 ; j<subBox.length ; j++) { 13 subBox[j].style.display = 'none'; 14 } 15 if( this.value ) { 16 var targetSub = document.getElementById( this.value ); 17 targetSub.style.display = 'inline'; 18 } 19 } 20 21 } 22}); 23</script>

php

1<form action=next.php method=POST> 2<div class="pulldownset"> 3<select class="kanjo" name=kanjo> 4<option value=預金>預金</option> 5<option value=消耗品>消耗品</option> 6<option value=売上>売上</option> 7</select> 8 9<select id="預金" class="hojo" name=hojo> 10<option value="A銀行">A銀行</option> 11<option value="B銀行">B銀行</option> 12</select> 13<select id="消耗品" class="hojo" name=hojo> 14<option value="FF">FF</option> 15<option value="ボトル">ボトル</option></select> 16<select id="売上" class="hojo" name=hojo> 17<option value="文旦">文旦</option> 18<option value="小夏">小夏</option></select> 19</div> 20<input type=submit value=次へ></form>

javaはありません。
next.php

php

1<?php 2 $kanjo=$_POST['kanjo']; $hojo=$_POST['hojo']; 3print <<<EOF 4 <table><tr><form action=kimari.php method=POST> 5<TD bgcolor=$bgc2 align=center><input type=hidden name=kanjo value=$kanjo>$kanjo</TD> </TR> 6<TR> <TD bgcolor=$bgc2 align=center> <input type=hidden name=hojo value=$hojo>$hojo </TD></TR></table> 7<input type=submit value=確定> <form> 8EOF; 9?>

以下のように書き換えましたが、動かなくなりました。

php

1<?php 2 3print <<<EOF 4<form action=next.php method=POST> 5<div class="pulldownset"> 6<TD bgcolor=$bgc2 align=center rowspan=2><div class="pulldownset"> 7<select class="kanjo" name="kanjo"> 8EOF; 9$selected=[]; 10$list_kanjo=["yokin","shomohin","uriage"]; 11array_walk($list_kanjo,function($i) use(&$selected){ 12 $selected["kanjo"][$i]=""; 13}); 14$val_kanjo=filter_input(INPUT_POST,"kanjo"); 15if(in_array($val_kanjo,$list_kanjo)){ 16 $selected["kanjo"][$val_kanjo]=" selected"; 17} 18print <<<EOF 19<option value=yokin$selected['kanjo']['yokin']>預金</option> 20<option value=shomohin$selected['kanjo']['shomohin']>消耗品</option> 21<option value=uriage$selected['kanjo']['uriage']>売上</option> 22</select> 23 24<select id="預金" class="hojo" name=hojo> 25<option value="A銀行">A銀行</option> 26<option value="B銀行">B銀行</option> 27</select> 28<select id="消耗品" class="hojo" name=hojo> 29<option value="FF">FF</option> 30<option value="ボトル">ボトル</option></select> 31<select id="売上" class="hojo" name=hojo> 32<option value="文旦">文旦</option> 33<option value="小夏">小夏</option></select> 34</div> 35<input type=submit value=次へ></form> 36EOF; 37?>

↓この部分を

php

1<select id="預金" class="hojo" name=hojo> 2<option value="A銀行">A銀行</option> 3<option value="B銀行">B銀行</option> 4</select> 5<select id="消耗品" class="hojo" name=hojo> 6<option value="FF">FF</option> 7<option value="ボトル">ボトル</option></select> 8<select id="売上" class="hojo" name=hojo> 9<option value="文旦">文旦</option> 10<option value="小夏">小夏</option></select>

以下のようにするなら私でもできると思います。

php

1<select id="預金" class="hojo" name=hojo[1]> 2<option value="A銀行">A銀行</option> 3<option value="B銀行">B銀行</option> 4</select> 5<select id="消耗品" class="hojo" name=hojo[2]> 6<option value="FF">FF</option> 7<option value="ボトル">ボトル</option></select> 8<select id="売上" class="hojo" name=hojo[3]> 9<option value="文旦">文旦</option> 10<option value="小夏">小夏</option></select>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/08/08 13:55

質問文のコードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
x_x

2017/08/09 00:39

タグにCがありますが、C言語は関係ないのではないでしょうか?
kujira

2017/08/09 00:50

c言語は関係ありません。phpとmysqlとjavaだと思います。勝手についたのですが修正方法がわかりません。
x_x

2017/08/09 02:17

確認画面2に問題があるということですよね? であれば、入力画面1ではなく確認画面2を出力している php or java のコードを提示してもらわなければいけないかと思います。
kujira

2017/08/09 02:31 編集

javaはありません。 ``` <?php $kanjo=$_POST['kanjo']; $hojo=$_POST['hojo']; print <<<EOF <table><tr><form action=kimari.php method=POST> <TD bgcolor=$bgc2 align=center><input type=hidden name=kanjo value=$kanjo>$kanjo</TD> </TR> <TR> <TD bgcolor=$bgc2 align=center> <input type=hidden name=hojo value=$hojo>$hojo </TD></TR></table> <input type=submit value=確定> <form> EOF; ?> ```
x_x

2017/08/09 02:30

コメント欄では見にくいため、質問欄に記入願えますか?
guest

回答3

0

ベストアンサー

もしhojoのidと関連付けたいならkanjoのvalueは
アルファベットから始まる英数のみに統一したほうがよいでしょう

一応こんなかんじでどうでしょう?

javascript

1NodeList.prototype.hide=function(){ 2 Array.prototype.map.call(this,function(i){ 3 i.style.display = 'none'; 4 }); 5}; 6HTMLElement.prototype.show=function(){ 7 this.style.display = 'inline'; 8}; 9window.onload=function(){ 10 document.querySelector(".kanjo").addEventListener('change',function(e){ 11 var p=e.target.parentNode; 12 p.querySelectorAll(".hojo").hide(); 13 p.querySelector("#"+e.target.value).show(); 14 }); 15 if(document.createEvent){ 16 var e=document.createEvent('UIEvents'); 17 e.initEvent("change",true,true); 18 }else{ 19 var e=new Event("change"); 20 } 21 document.querySelector(".kanjo").dispatchEvent(e); 22}

HTML

1 2<form action=next.php method=POST> 3<div class="pulldownset"> 4<select class="kanjo" name=kanjo> 5<option value="yokin">預金</option> 6<option value="shomohin">消耗品</option> 7<option value="uriage">売上</option> 8</select> 9 10<select id="yokin" class="hojo" name=hojo> 11<option value="A銀行">A銀行</option> 12<option value="B銀行">B銀行</option> 13</select> 14<select id="shomohin" class="hojo" name=hojo> 15<option value="FF">FF</option> 16<option value="ボトル">ボトル</option></select> 17<select id="uriage" class="hojo" name=hojo> 18<option value="文旦">文旦</option> 19<option value="小夏">小夏</option></select> 20</div> 21<input type=submit value=次へ></form>

追記

念の為hojoの引き継ぎも追記しておきます

PHP

1$selected=[]; 2$list=[ 3 "kanjo"=>["yokin","shomohin","uriage"], 4 "hojo"=>["A銀行","B銀行","FF","ボトル","文旦","小夏"], 5 ]; 6$vals=[ 7 "kanjo"=>filter_input(INPUT_POST,"kanjo"), 8 "hojo"=>filter_input(INPUT_POST,"hojo"), 9 ]; 10foreach($list as $key=>$arr){ 11 foreach($arr as $val){ 12 $selected[$key][$val]=($val==$vals[$key]?" selected":""); 13 } 14}

javascriptでhojoの送るものを選別

javascript

1NodeList.prototype.hide=function(){ 2 Array.prototype.map.call(this,function(i){ 3 i.style.display = 'none'; 4 i.disabled = true; 5 }); 6}; 7HTMLElement.prototype.show=function(){ 8 this.style.display = 'inline'; 9 this.disabled = false; 10}; 11window.onload=function(){ 12 document.querySelector(".kanjo").addEventListener('change',function(e){ 13 var p=e.target.parentNode; 14 p.querySelectorAll(".hojo").hide(); 15 p.querySelector("#"+e.target.value).show(); 16 }); 17 if(document.createEvent){ 18 var e=document.createEvent('UIEvents'); 19 e.initEvent("change",true,true); 20 }else{ 21 var e=new Event("change"); 22 } 23 document.querySelector(".kanjo").dispatchEvent(e); 24} 25

上記を設定した上でHTML部分も調整

HTML

1<form method="POST"> 2<div class="pulldownset"> 3<select class="kanjo" name="kanjo"> 4<option value="yokin"<?PHP print $selected["kanjo"]["yokin"];?>>預金</option> 5<option value="shomohin"<?PHP print $selected["kanjo"]["shomohin"];?>>消耗品</option> 6<option value="uriage"<?PHP print $selected["kanjo"]["uriage"];?>>売上</option> 7</select> 8 9<select id="yokin" class="hojo" name="hojo"> 10<option value="A銀行"<?PHP print $selected["hojo"]["A銀行"];?>>A銀行</option> 11<option value="B銀行"<?PHP print $selected["hojo"]["B銀行"];?>>B銀行</option> 12</select> 13<select id="shomohin" class="hojo" name="hojo"> 14<option value="FF"<?PHP print $selected["hojo"]["FF"];?>>FF</option> 15<option value="ボトル"<?PHP print $selected["hojo"]["ボトル"];?>>ボトル</option> 16</select> 17<select id="uriage" class="hojo" name="hojo"> 18<option value="文旦"<?PHP print $selected["hojo"]["文旦"];?>>文旦</option> 19<option value="小夏"<?PHP print $selected["hojo"]["小夏"];?>>小夏</option></select> 20</div> 21<input type=submit value=次へ></form>

投稿2017/08/09 01:19

編集2017/08/09 03:38
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kujira

2017/08/09 01:58

早速のご回答ありがとうございます。 ご提案のようにやってみましたが、やはり次ページのhojoは「文旦」になります。
yambejp

2017/08/09 02:09

ちょっと勘違いしていたかもしれません。 いまのページで選んだものがnext.phpでも選ばれていてほしいということでしょうか?
kujira

2017/08/09 02:12

yambejpさんそういうことです。
kujira

2017/08/09 02:16

今のページで入力したものがそのままデータベースに登録されれば、次のページにいく必要もないことになり、それはそれで便利ですが・・・
yambejp

2017/08/09 02:23

PHP側の処理が必要です。 追記しておきます
yambejp

2017/08/09 02:36 編集

ちなみにhojoが名前の競合を起こしています (displayをnoneにしても、postのデータは送られます) もしhojo自体を引き継ぎたい場合は 以下のいずれかを設定する必要があります (1)3つの補助を別名にする(たとえばhojo1,hojo2,hojo3など) (2)hojoを「hojo[]」など特殊な名称にする (3)javascriptでdisabledをつけかえる処理をいれる
yambejp

2017/08/09 03:38

とりあえずわかっている範囲で修正しておきました
kujira

2017/08/09 06:43

<select id="uriage" class="hojo" name="hojo">のname="hojo"のhojoを配列にするということですか? >(1) >(2)
yambejp

2017/08/09 06:55

(1)はhojoという名前の3つのnameを完全に別名にするということ 例えば最初を<select name="yokin"> 次を<select name="shomohin"> 最後を<select name="uriage"> とすれば、それぞれのパラメータがサーバー側に渡ります (2)はちょっと特殊で、それぞれのselectをすべて <select name="hojo[]">というように統一します こうしておくと、預金と消耗品と売上の3箇所に設定したデータが PHP側でhojoという配列で受け取れます。 一応本文に追記したパターンが(3)です
kujira

2017/08/09 07:46 編集

ご丁寧にお付き合いいただきありがとうございました。おかげさまで自分なりの結論を配列を使うことで得ました。JAVAはチンプンカンプンなので又余裕ができたら取り組むかもしれません。
guest

0

配列を使うことで解決しました。
id="預金"等はデータベースを改造するのが面倒なのでとりあえずこれでいきます。

index.php

php

1<?php 2print <<<EOF 3<TD bgcolor=$bgc2 align=center rowspan=2><div class="pulldownset"> 4<select class="kanjo" name="kanjo"> 5<option value=預金>預金</option> 6<option value=消耗品>消耗品</option> 7<option value=売上>売上</option> 8</select> 9 10<select id="預金" class="hojo" name=hojo[0]> 11<option value="A銀行">A銀行</option> 12<option value="B銀行">B銀行</option> 13</select> 14<select id="消耗品" class="hojo" name=hojo[1]> 15<option value="FF">FF</option> 16<option value="ボトル">ボトル</option></select> 17<select id="売上" class="hojo" name=hojo[2]> 18<option value="文旦">文旦</option> 19<option value="小夏">小夏</option></select> 20</div> 21</TD> 22EOF; 23?>

next.php

php

1<?php 2$kanjo=$_POST['kanjo']; 3$hojo=$_POST['hojo']; 4if($kanjo=="預金"){$hj=0;} 5if($kanjo=="消耗品"){$hj=1;} 6if($kanjo=="売上"){$hj=2;} 7print <<<EOF 8<table><tr><form action=kimari.php method=POST> 9<TD bgcolor=$bgc2 align=center><input type=hidden name=kanjo value=$kanjo>$kanjo</TD> 10</TR> 11<TR> 12<TD bgcolor=$bgc2 align=center> 13<input type=hidden name=hojo value=$hojo[$hj]>$hojo[$hj] 14</TD></TR></table> 15<input type=submit value=確定> 16<form> 17EOF; 18?>

投稿2017/08/09 07:42

kujira

総合スコア14

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

こちらで試してみたところ正しく動いているようです。

投稿2017/08/08 13:38

chitoku

総合スコア1610

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kujira

2017/08/08 22:46

このコードを問題の部分に置き換えてデータベースと切り離りはなし、実行しましたがやはり、預金 で 文旦になります。
kujira

2017/08/09 00:33

chromeで動かしていたのをIE11でもやってみましたが同様です。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問