金銭出納簿8 javascript

<script>

   // ユーザー関数　ドロップダウンリストを空にする
   function listClear(node) {
     var options = document.querySelectorAll(node);
     options.forEach(option => {
       option.remove();
     });
    }  

     var subcategorylists = JSON.parse('<?php echo json_encode($subcategories)?>');
     var subcategoryfilterlists;
     var detaillists = JSON.parse('<?php echo json_encode($details)?>');
     var detailfilterlists;

     // form要素を取得
     var form1 = document.getElementById( "form_1" ) ;
     // form要素内のラジオボタングループ(name="type_id")を取得
     var typeid = form1.type_id;
   
     var subcategorynumber = document.getElementById('sub_category_number'); 
     var detailid = document.getElementById('detail_id'); 

     //ラジオボタンが押された時の処理
     for (let target of typeid) {
	      target.addEventListener(`change`, function () {

          //ユーザー関数 リストを空にする
         listClear('#sub_category_number > option');
         // プルダウンに「選択してください」を加える
         let firstSelect1 = document.createElement('option');
          firstSelect1.textContent = '選択してください';
          subcategorynumber.appendChild(firstSelect1);

         listClear('#detail_id > option');
         let firstSelect2 = document.createElement('option');
          firstSelect2.textContent = '選択してください';
          detailid.appendChild(firstSelect2); 

          if(typeid.value=='1'){
            subcategoryfilterlists = subcategorylists.filter((subcategorylist) => {
              return subcategorylist.type_id == 1;
            });
            detailfilterlists = detaillists.filter((detaillist) => {
              return detaillist.type_id == 1;
            });

          }else if(typeid.value=='2'){
            subcategoryfilterlists = subcategorylists.filter((subcategorylist) => {
              return subcategorylist.type_id == 2;
            });
            detailfilterlists = detaillists.filter((detaillist) => {
              return detaillist.type_id == 2;
            });
          }

          subcategoryfilterlists.forEach(function( subcategoryfilterlist ) {
            let option = document.createElement('option');
            option.value=subcategoryfilterlist.id;
            //join句のため,表記注意
            option.textContent = subcategoryfilterlist.type_id+"/"+subcategoryfilterlist.category_number+"/"+subcategoryfilterlist.category_name+"/"+subcategoryfilterlist.sub_category_number+"/"+subcategoryfilterlist.sub_category_name ;
            subcategorynumber.appendChild(option);    
          });  


          detailfilterlists.forEach(function( detailfilterlist ) {
            let option = document.createElement('option');
            //select as でidの名称変更している
            option.value=detailfilterlist.detail_id;
            //join句のため,表記注意
            option.textContent = detailfilterlist.sub_category_number+"/"+detailfilterlist.sub_category_name+"/"+detailfilterlist.detail_name ;
            detailid.appendChild(option);    
          }); 
	      });
      }

      // 科目が選択されたら詳細のプルダウンリストを作成
      subcategorynumber.addEventListener(`change`,function () {
    
        console.log("qqq");

          listClear('#detail_id > option');
         let firstSelect = document.createElement('option');
          firstSelect.textContent = '選択してください';
          detailid.appendChild(firstSelect); 

          detailfilterlists = detaillists.filter((detaillist) => {
              return detaillist.sub_category_id == subcategorynumber.value;
            });

            detailfilterlists.forEach(function( detailfilterlist ) {
            let option = document.createElement('option');
            //select as でidの名称変更している
            option.value=detailfilterlist.detail_id;
            //join句のため,表記注意
            option.textContent = detailfilterlist.sub_category_number+"/"+detailfilterlist.sub_category_name+"/"+detailfilterlist.detail_name ;
            detailid.appendChild(option);    
          }); 
      });

      // 詳細が選択されたら科目を抽出,セレクト
       detailid.addEventListener(`change`,function () {

         //ユーザー関数 リストを空にする
         listClear('#sub_category_number > option');
         let firstSelect = document.createElement('option');
          firstSelect.textContent = '選択してください';
          subcategorynumber.appendChild(firstSelect);  
 
          let detailfindid =detaillists.find((detaillist) => {
            return detaillist.detail_id == detailid.value; 
          });

          let findsubcategory = subcategorylists.find(function (subcategorylist) {
            return subcategorylist.id == detailfindid.sub_category_id;
          });
      
          let option = document.createElement('option');
            option.value=findsubcategory.id;
            //join句のため,表記注意
            option.textContent = findsubcategory.type_id+"/"+findsubcategory.category_number+"/"+findsubcategory.category_name+"/"+findsubcategory.sub_category_number+"/"+findsubcategory.sub_category_name ;
            option.selected=true;
            subcategorynumber.appendChild(option);    

      });

   </script>