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

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

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

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

2359閲覧

PHPとjQueryを使用した動的なセレクトボックスの実現

kans00229

総合スコア28

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/10/16 03:54

編集2017/10/16 05:37

PHPバージョン5.6
フレームワーク等は使用しておりません。

下記のフォームで、実現したい動きが
ございます。

現在の動作はコチラです。
https://paiza.io/projects/5PgxAfnUWt17lyc4NpfGyw

■実現したい動作
①フォームの「交代時間」部分について、フォーム操作の「追加」でフォームを
増加した時に、増加する前の選択していた時間(1120)より後の数字のみ
選択可能にしたい。
例:一番目のフォームが30なら、二番目は31
120までしか選べない

②フォームの「交代選手名」部分について、フォーム操作の「追加」でフォームを
増加した時に、増加する前に「交代選手名」選択された選手名を除外して表示。
また、フォームを増加する前に「IN選手名」で選択された選手名を選択できるようにさせたい。

③フォームの「IN選手名」部分について、フォーム操作の「追加」でフォームを
増加した時に、増加する前と現在の「交代選手名」で選択されて選手名とおよび
フォームを増加する前の「IN選手名」で選択された選手名を除外して表示させたい。

説明が解りずらいかと思われますが、フォーム操作で「追加」を押した際とセレクトボックス
の選択によって、セレクトボックスが状況に応じて選択項目が変化するという動きを実現
したいと考えています。

私の知識では実現が難しく、本サイトでご教授して頂き解決した物も多い
ため、皆様のお力をお貸し頂ければと思います。

宜しくお願い致します。

<?php // Here your code ! $in_member = array( '0' => array( 'id_mbr' => '1', 'name_mbr' => '田中', ), '1' => array( 'id_mbr' => '2', 'name_mbr' => '鈴木', ), '2' => array( 'id_mbr' => '3', 'name_mbr' => '山田', ), '3' => array( 'id_mbr' => '4', 'name_mbr' => '中山', ), '4' => array( 'id_mbr' => '5', 'name_mbr' => '本田', ), '5' => array( 'id_mbr' => '6', 'name_mbr' => '香川', ) ); $out_member = array( '0' => array( 'id_mbr' => '1', 'name_mbr' => '田中', ), '1' => array( 'id_mbr' => '2', 'name_mbr' => '鈴木', ), '2' => array( 'id_mbr' => '3', 'name_mbr' => '山田', ), '3' => array( 'id_mbr' => '4', 'name_mbr' => '中山', ), '4' => array( 'id_mbr' => '5', 'name_mbr' => '本田', ), '5' => array( 'id_mbr' => '6', 'name_mbr' => '香川', ) ); //スコア部分 $cnt_mem = isset($game_info["cnt_mem"]) ? $game_info["cnt_mem"]: 1; $change_time = isset($game_info["change_time"]) ? $game_info["change_time"]: 0; $in_mbr = isset($game_info["in_mbr"]) ? $game_info["in_mbr"]: 0; $out_mbr = isset($game_info["out_mbr"]) ? $game_info["out_mbr"]: 0; ?> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script> $(function() { //選手交代部分 $('.mem_clear').on('click', '.mem_clear_btn', function(){ $('.mem_box:first').find('option.outmem').attr('selected', false); $('.mem_box:first').find('option.outintime').attr('selected', false); $('.mem_box:first').find('option.inmem').attr('selected', false); }); $(".btn_delete_btn_mem:not(:first)").show(); var cloneElem4 = $('.mem_box:last'); $('.memadd').on('click', '.memadd_btn', function(){ $('.mem_box:last').after(cloneElem4.clone(true)); $('.mem_box:last').find('option.outmem').attr('selected', false); $('.mem_box:last').find('option.outintime').attr('selected', false); $('.mem_box:last').find('option.inmem').attr('selected', false); $(".cnt_mem").val(1+Number($(".cnt_mem").val())); $(".btn_delete_btn_mem:not(:first)").show(); $(".mem_clear:not(:first)").hide(); $(".for_dele_mem:not(:first)").show(); }); $('.for_dele_mem').on('click', '.btn_delete_btn_mem', function(){ $(this).closest(".mem_box").remove(); $(".cnt_mem").val(Number($(".cnt_mem").val()-1)); }); }); </script> <!--選手交代--> <div class="panel panel-default dispon"> <div class="thumbnail_title thumbnail_title_freeimg"><i class="fa fa-user" aria-hidden="true"></i>選手交代 <span style="text-align:right !important;display:inline-block;float: right;margin-right: 10px;font-size:17px;"><i class="fa fa-info-circle" aria-hidden="true"></i></span> </div> <div class="panel-body"> <?php for ($i = 0; $i < $cnt_mem; $i++) { ?> <div class="mem_box"> <div class="col-md-2 col-sm-12 col-xs-12 form_nonepd"> <label class="control-label" for="com_score">交代時間</label> <select class="form-control ubstitution_one" name="change_time[]"> <option value="0">交代時間</option> <?php for ($gtime = 1; $gtime < 121; $gtime++) { ?> <option class="outintime" <?php if(!isset($_POST['result_add_btn'])) { if($change_time[$i] == $gtime) { echo 'selected="selected"';}} ?>><?php echo $gtime; ?></option> <?php } ?> </select> </div> <div class="col-md-2 col-sm-12 col-xs-12 form_nonepd"> <label class="control-label" for="com_score">交代選手名</label> <select class="form-control out_mbr_one" name="out_mbr[]"> <option value="0">交代選手名</option> <?php foreach ($in_member as $key => $in_mem) { ?> <option class="outmem" id="out_mbr_one<?php echo $in_mem['id_mbr']; ?>" value="<?php echo $in_mem['id_mbr']; ?>" <?php if(!isset($_POST['result_add_btn'])) { if($out_mbr[$i] == $in_mem['id_mbr']) { echo 'selected="selected"';} }?>><?php echo $in_mem['name_mbr']; ?></option> <?php } ?> </select> </div> <div class="col-md-2 col-sm-12 col-xs-12 form_nonepd"> <label class="control-label" for="com_score">IN選手名</label> <select class="form-control in_mbr_one" name="in_mbr[]"> <option value="0">IN選手名</option> <?php foreach ($out_member as $key => $out_mem) { ?> <option class="inmem" id="in_mbr_one<?php echo $out_mem['id_mbr']; ?>" value="<?php echo $out_mem['id_mbr']; ?>" <?php if(!isset($_POST['result_add_btn'])) { if($in_mbr[$i] == $out_mem['id_mbr']) { echo 'selected="selected"';}} ?>><?php echo $out_mem['name_mbr']; ?></option> <?php } ?> </select> </div> <div class="col-sm-2 col-xs-12 form_nonepd mem_clear"> <label class="control-label">フォーム操作</label> <button type="button" class="btn btn-warning btn-block mem_clear_btn" name="clear_btn" style="padding-left:25px;padding-right:25px;"><i class="fa fa-times" aria-hidden="true"></i>クリア</button> </div> <div class="col-sm-2 col-xs-12 for_dele_mem form_nonepd" style="display:none;"> <label class="control-label" for="btn_delete_btn_mem">フォーム操作</label> <button type="button" class="btn btn_delete_btn_mem btn-block" style="padding-left:25px;padding-right:25px;" name="btn_delete_btn_mem"><i class="fa fa-trash-o" aria-hidden="true"></i>削除</button> </div> <div class="col-sm-2 col-xs-12 form_nonepd memadd"> <label class="control-label" for="memadd_btn">フォーム操作</label> <button type="button" class="btn btn-info btn-block memadd_btn" name="memadd_btn" style="padding-left:25px;padding-right:25px;"><i class="fa fa-plus" aria-hidden="true"></i>追加</button> <input type="hidden" name="cnt_mem" id="cnt_mem" class="cnt_mem" value="<?php echo $cnt_mem; ?>"> </div> </div> <?php } ?> </div> </div>

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

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

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

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

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

karamarimo

2017/10/16 04:01

フォームを追加した後に、前の行の値を変更した場合どうなって欲しいのでしょうか?
kans00229

2017/10/16 05:00

karamarimo様 ご返答ありがとうございます。フォームをを追加した後で、前の行を変更した場合も、同じように連動出来れば最も良いです。
guest

回答1

0

ベストアンサー

ちょっと仕様がわかりづらいのですが
outで選んだ選手をinに表示したくないのでしょうか?
そもそもoutする選手はプレー中で、inする選手はベンチにいるわけですから
データの属性が最初から違うのでは?
データ構造を変えないとどちらにしてもロジックがおかしいことになると思います。

また1行目のクリアの位置が2行目には削除というのはあまりよくありません。
1行目がクリアなら2行目にもクリアを置き別途削除を置きます
そうでないなら1行目のクリアは辞めたほうがいいでしょう。

全体の流れとしては
基本的には1行目をcloneしてつかい、交代時間は1行目の値をベースに
いらないデータを削除するかdisabledにするかでしょうか
場合によってはajaxでデータをおくって初期値を調整する方法もありますが
そこまでするほどではないかと。

sample

以下ちょっとバグバグしてますが、ざっとした流れはこれでわかると思います。
focus時に削除処理をいれています

javascript

1$(function() { 2 var out_mbr=["先発01","先発02","先発03","先発04","先発05","先発06","先発07","先発08","先発09","先発10","先発11"]; 3 var in_mbr=["控え01","控え02","控え03","控え04","控え05","控え06"]; 4 $(document).on('focus','select[name="change_time[]"]',function(){ 5 var me=$(this); 6 me.find('option:gt(0)').remove(); 7 for(var i=0;i<=120;i++){ 8 me.append($('<option>').val(i).text(i)); 9 }; 10 var v=parseInt(me.closest('.row').prev('.row').find('select[name="change_time[]"]').val()); 11 me.find('option').filter(function(){return $(this).val()!="" && parseInt($(this).val())<v;}).remove(); 12 13 }); 14 $(document).on('focus','select[name="out_mbr[]"]',function(){ 15 var me=$(this); 16 me.find('option:gt(0)').remove(); 17 out_mbr.forEach(function(i){ me.append($('<option>').val(i).text(i));}); 18 $('select[name="out_mbr[]"]').filter(function(){return $(this).val()!=="";}).each(function(){ 19 var v=$(this).val(); 20 me.find('option').filter(function(){return $(this).val()==v;}).remove(); 21 }); 22 }); 23 $(document).on('focus','select[name="in_mbr[]"]',function(){ 24 var me=$(this); 25 me.find('option:gt(0)').remove(); 26 in_mbr.forEach(function(i){ me.append($('<option>').val(i).text(i));}); 27 $('select[name="in_mbr[]"]').filter(function(){return $(this).val()!=="";}).each(function(){ 28 var v=$(this).val(); 29 me.find('option').filter(function(){return $(this).val()==v;}).remove(); 30 }); 31 }); 32 $(document).on('click','[type=button][value=追加]',function(){ 33 var r1=$(this).closest('.row'); 34 var r2=r1.clone(); 35 r2.find('[type=button][value=削除]').css('visibility','visible').prop('disabled',false); 36 r1.after(r2); 37 }); 38 $(document).on('click','[type=button][value=削除]',function(){ 39 $(this).closest('.row').remove(); 40 }); 41}); 42

HTML

1<div class="row"> 2<select name="change_time[]"> 3<option value="">交代時間</option> 4</select> 5交代選手名 6<select name="out_mbr[]"> 7<option value="">OUT選手</option> 8</select> 9<select name="in_mbr[]"> 10<option value="">IN選手名</option> 11</select> 12<input type="button" value="削除" style="visibility:hidden" disabled> 13<input type="button" value="追加"> 14</div>

投稿2017/10/16 04:42

編集2017/10/16 09:21
yambejp

総合スコア114572

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

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

kans00229

2017/10/16 05:07

yambejp様 ご返答有難うございます。 ボタンの構造につきましては、確かに間違いを招きやすいと 思いますので、表示の変更を検討致します。 outとinの選手のデータ構成に関しまして、確かにそうですね。 分けたいと思います。 有難うございます。
yambejp

2017/10/16 09:21

sampleつけておきました、参考になればと
kans00229

2017/10/17 00:24

yambejp様 ご回答有難うございます。 sampleまでつけて頂き、誠に感謝致します。 本当に有難うございます。
kans00229

2017/11/21 03:26

yamabejp様 先日はご回答頂きまして誠に有難うございました。 ■先発メンバーを選ぶセレクトボックス(全体メンバーから最大11名選択) ■交代メンバーを選ぶセレクトボックス(先発メンバーを選ぶセレクトボックスで選択したもの) ■控えメンバーを選ぶセレクトボックス(全体のメンバーから先発メンバー除いたもの) 先日、お教え頂きましたサンプルの「out_mbr」「in_mbr」の値を 先発メンバーを選ぶセレクトボックスを同一ページ内に設置して、選んだ選手(最大11名) をout_mbrの配列に入れる。 in_mbrには、全体のメンバーからout_mbrを引いた値で配列を作成するという動的な動きが 可能でしょうか? ご教授頂ければ幸いでございます。 宜しくお願い致します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問