作業環境
Jquery3.3.1
HTML5 (bootstrap3)
開発環境 xamppローカルホスト
とある案件にて管理画面を1から作成させていただいております。
今回力を貸して頂きたいのがタイトルにもある通りモーダルウィンドウから別モーダルウィンドウを開くような動作です
動作の流れとしては
フロント画面にモーダルウィンドウを開くボタンがある
ボタン ←これを押すと一枚目のモーダルウィンドウが開く
-モーダルウィンドウbody内-
セレクトボックスで要素を選択できる
要素を選択後、モーダルウィンドウ内のボタンを押せば
選んだ要素に対応したモーダルウィンドウが開き直される。
開き直されたモーダルウィンドウ内で必要項目を入力し入力した値を保存し追加
(値の保存追加、処理はひとまず大丈夫です)
現在できている処理として
一枚目までのモーダルウィンドウを開いて、セレクトボックスから値を選択して
選択された要素に基づいた値を出現させるまではできています。
ここからどうやってモーダルウィンドウを開き直させるのかがわかりません。。
何卒よろしくお願い致します。
HTML
1<button type="button" class="btn btn-github" data-toggle="modal" data-target="#modal-default"> 2 コンテンツ追加 3</button> 4 5 6 7<!-- ==================================================================================== 8| モーダルウィンドウ中身 9===================================================================================== --> 10 11<div class="modal fade" id="modal-default"> 12 <div class="modal-dialog"> 13 <div class="modal-content"> 14 <div class="modal-body"> 15 <h4 class="small">追加</h4> 16 <div class="bottom"> 17 <select class="extraction"> 18 <option value="list1">list1</option> 19 <option value="list2">list2</option> 20 <option value="list3">list3</option> 21 <option value="list4">list4</option> 22 <option value="list5">list5</option> 23 </select> 24 </div> 25 <div class="list1 none"> 26 list1 27 </div> 28 29 <div class="list2 none"> 30 list2 31 </div> 32 33 <div class="list3 none"> 34 list3 35 </div> 36 37 <div class="list4 none"> 38 list4 39 </div> 40 41 <div class="list5 none"> 42 リスト5 43 </div> 44 </div> 45 <div class="modal-footer"> 46 <button type="button" class="btn btn-default pull-left third" data-dismiss="modal">Close </button> 47 <button type="button" class="btn btn-github third" id="save5">Save changes</button> 48 </div><!--modal-footer--> 49 </div><!--modal-content--> 50 </div><!--dialog--> 51</div><!-- modal fade --> 52 53
jQuery
1 2//モーダルウィンドウを開く動作はbootstrap3の処理を使っているので独自で書いているコードはありません。 3 4<script> 5 $(".extraction").change(function() { 6 var extraction_val = $(".extraction").val(); 7 if(extraction_val == "list1") { 8 $('.list1').css('display', 'block'); 9 $('.list2').css('display', 'none'); 10 $('.list3').css('display', 'none'); 11 $('.list4').css('display', 'none'); 12 $('.list5').css('display', 'none'); 13 }else if(extraction_val == "list2") { 14 $('.list1').css('display', 'none'); 15 $('.list2').css('display', 'block'); 16 $('.list3').css('display', 'none'); 17 $('.list4').css('display', 'none'); 18 $('.list5').css('display', 'none'); 19 }else if(extraction_val == "list3") { 20 $('.list1').css('display', 'none'); 21 $('.list2').css('display', 'none'); 22 $('.list3').css('display', 'block'); 23 $('.list4').css('display', 'none'); 24 $('.list5').css('display', 'none'); 25 } else if(extraction_val == "list4") { 26 $('.list1').css('display', 'none'); 27 $('.list2').css('display', 'none'); 28 $('.list3').css('display', 'none'); 29 $('.list4').css('display', 'block'); 30 $('.list5').css('display', 'none'); 31 } else if(extraction_val == "list5") { 32 $('.list1').css('display', 'none'); 33 $('.list2').css('display', 'none'); 34 $('.list3').css('display', 'none'); 35 $('.list4').css('display', 'none'); 36 $('.list5').css('display', 'block'); 37 } 38}); 39</script> 40 41
回答1件
あなたの回答
tips
プレビュー