前提・実現したいこと
お世話になっております。
Laravelでフォームを作っており、DBから取得したリストを2つのセレクトボックスに表示させているのですが
一つ目のセレクトボックスを選択したらそれと関連するもののみ二つ目のセレクトボックスに表示させる動きをjQueryを使わず素のJavaScriptのみで実装したいです。
下のソースコードで言うと、corporationセレクトボックスにはgroupセレクトボックスで選択したoptionのvalueと同じgroup_idをdata-valに持つoptionのみ表示させたいです。
該当のソースコード
HTML
1 2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> 4<head> 5<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 6<meta http-equiv="Content-Style-Type" content="text/css; charset=UTF-8" /> 7<meta http-equiv="Content-Script-Type" content="text/javascript; charset=UTF-8" /> 8<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 9<link rel="stylesheet" type="text/css" href="http://192.168.73.10/wired_admin/default.css" /> 10<script type="text/javascript" src="http://192.168.73.10/javascripts/vendor/prototype.js"></script> 11<script type="text/javascript" src="http://192.168.73.10/javascripts/vendor/scriptaculous/scriptaculous.js"></script> 12<link rel="stylesheet" type="text/css" href="http://192.168.73.10/wired_admin/themes/classic/theme.css" /> 13<script type="text/javascript" src="http://192.168.73.10/wired_admin/themes/classic/theme.js" charset="UTF-8"></script> 14<script type="text/javascript" src="http://192.168.73.10/javascripts/application.js"></script> 15<link rel="stylesheet" type="text/css" href="http://192.168.73.10/wired_admin/themes/classic/member.css" /> 16<title>管理システム</title> 17!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> --> 18<script type="text/javascript"> 19 20 Event.observe(window, 'load', function() { 21 22 disableCoporations(); 23 }); 24 25 26 function disableCoporations() { 27 if ($('p_s_service_account_group_id').value == 3 || $('p_s_service_account_group_id').value == 7) { 28 $('p_m_groups').disabled = false; 29 $('p_m_corporation_id').disabled = false; 30 } else if ($('p_s_service_account_group_id').value == 6) { 31 $('p_m_groups').disabled = false; 32 $('p_m_corporation_id').disabled = true; 33 $('p_m_corporation_id').value = "all"; 34 } else { 35 $('p_m_groups').disabled = true; 36 $('p_m_groups').value = "all"; 37 $('p_m_corporation_id').disabled = true; 38 $('p_m_corporation_id').value = "all"; 39 } 40 } 41 42 window.addEventListener('DOMContentLoaded', function(e){ 43 var cl=document.querySelector('#p_m_corporation_id').cloneNode(true); 44 document.querySelector('#p_m_groups').addEventListener('change',function(e){ 45 var t=e.target; 46 [].forEach.call(document.querySelectorAll('#p_m_corporation_id option'),function(x){ 47 x.parentNode.removeChild(x); 48 }); 49 [].filter.call(cl.querySelectorAll('option'),function(x){ 50 return x.value=="all" || t.value=="all" || x.getAttribute("data-val")==t.value; 51 }).forEach(function(x){ 52 document.querySelector('#p_m_corporation_id').appendChild(x.cloneNode(true)); 53 }); 54 }); 55 }); 56 57 // $(function($) { 58 // var $corporation = $('p_m_corporation_id'); 59 // var original = $corporation.html(); 60 61 // $('#p_m_groups').change(function() { 62 // var val1 = $(this).data('val'); 63 64 // $corporation.html(original).find('option').each(function() { 65 // var val2 = $(this).data('val'); 66 // if (val1 != val2) { 67 // $(this).not(':first-child').remove(); 68 // } 69 // }); 70 71 // if ($(this).val() === '') { 72 // $corporation.attr('disabled', 'disabled'); 73 // } else { 74 // $corporation.removeAttr('disabled'); 75 // } 76 77 // }); 78 // }); 79 80</script> 81</head> 82<body class="logged_in"> 83 84<div id="container"> 85 <div id="main"> 86 <div id="content"> 87 <h2>新規登録</h2> 88 <form method="post" action="/create_confirm"> 89 <table class="usual"> 90 <tr> 91 <th style="width:100px">アカウント<span class="required">*</span></th> 92 <td style="width:300px"><input type="text" name="account" value="" style="ime-mode:disabled; width: 150px;"></td> 93 </tr> 94 <tr> 95 <th style="width:100px">ニックネーム<span class="required">*</span></th> 96 <td style="width:300px"><input type="text" name="name" value="" style="ime-mode:disabled; width: 150px;"></td> 97 </tr> 98 <tr> 99 <th>権限グループ<span class="required">*</span></th> 100 <td> 101 <select name="group" id="group" class="group"> 102 <option value="all"></option> 103 <option value="0">グループなし</option> 104 <option value="1" >テストグループ1</option> 105 <option value="2" >テストグループ2</option> 106 <option value="3" >テストグループ3</option> 107 <option value="4" >テストグループ4</option> 108 <option value="5" >テストグループ4</option> 109 <option value="6" >テストグループ5</option> 110 <option value="7" >テストグループ6</option> 111 <option value="13" >テストグループ7</option> 112 <option value="14" >テストグループ8</option> 113 </select> 114 115 <select name="corporation" id="corporation" class="corporation"> 116 <option value="all"></option> 117 <option value="584" data-val="1" >テスト法人1-1</option> 118 <option value="585" data-val="0" >テスト法人1-2</option> 119 <option value="586" data-val="1" >テスト法人2-1</option> 120 <option value="587" data-val="14" >テスト法人2-2</option> 121 <option value="588" data-val="5" >テスト法人3-1</option> 122 <option value="589" data-val="13" >テスト法人4-1</option> 123 <option value="590" data-val="6" >テスト法人4-2</option> 124 <option value="591" data-val="7" >テスト法人5-1</option> 125 <option value="592" data-val="7" >テスト法人5-2</option> 126 <option value="593" data-val="1" >テスト法人6-1</option> 127 <option value="594" data-val="2" >テスト法人6-2</option> 128 </select> 129 </td> 130 </tr> 131 </table> 132 <p> 133 <input type="button" value=" キャンセル " onclick="location.href='list'"> <input type="submit" value=" 登録 "> 134 <input type="hidden" name="id" value=""> 135 </p> 136 </form> 137 </div> 138 </div> 139</div> 140</body> 141</html> 142 143
試したこと
jQueryだとこのようなコードになりました。
JavaScript
1$(function() { 2 var $corporation = $('#corporation_id'); 3 var original = $corporation.html(); 4 5 $('#group').change(function() { 6 var val1 = $(this).data('val'); 7 8 $corporation.html(original).find('option').each(function() { 9 var val2 = $(this).data('val'); 10 if (val1 != val2) { 11 $(this).not(':first-child').remove(); 12 } 13 }); 14 15 if ($(this).val() === '') { 16 $corporation.attr('disabled', 'disabled'); 17 } else { 18 $corporation.removeAttr('disabled'); 19 } 20 21 }); 22});
JavaScriptで実装する方法も調べたのですが、optionをJS内で生成しているものばかりで、
グループ分けされていないリストを制御する方法が分からなかったため質問させていただきました。
初心者なので説明等分かりにくい箇所が多いかもしれませんが、ご教授頂けますと幸いです。
よろしくお願い致します。
追記:
同じテンプレート内の別の箇所でJavaScriptを使っている箇所があり、
上記jQueryをテンプレート内で実行したところそのJavaScriptも動かなくなってしまったので、
JavaScriptしか使えないのだと思いこの質問をしました。
jQueryの実行確認は別のHTMLファイルで行いました。
回答3件
あなたの回答
tips
プレビュー