IE11でonclickが動かない

Question

お世話になっております。
当方Laravel5.5にてWebSiteを構築しております、
環境はWindows10
ブラウザはIE11 バージョン: 11.295になります。

前提

本件で扱う仕組みは、データをサイトに投稿する際に、
4階層に階層化されたカテゴリーをselectboxを
使用して1階層ずつ選択する仕組みです。
（ログインが必要な画面なのでリンクは貼ることができませんが、
ヤフオクの出品カテゴリ選択と同じです）
第一階層のカテゴリをselectボックスのoptionから
選ぶと第二階層のselectボックスが右に出現し、
かつその中身は第一階層で選んだカテゴリーの配下になっています。
なので、selectボックスのoptionタグに、onclickを使用して、
次の階層のselectボックスの出現・非出現をコントロールしています。
（第一階層で選んだものによっては、次の階層を出現させず、そのカテゴリー
で投稿させるものがあるため、中身の値で出現・非出現の判断が必要です）

やりたいこと

selectボックスの中のoption(データベースから出力した値をforeachで取得している)
をクリックした際に、onclickを起動させたいです。

現状

ChromeとEdgeではonclickが起動しますが、IEだと動きません。
Googleで検索したところ、下記の可能性があるという記事がありましたが、
本件にはあてはまらないようです。

・タグの id 属性 ( name 属性？ ) の値と同一の関数名は呼び出されない
→http://hensa40.cutegirl.jp/archives/908
・ブラウザでjavascriptが無効になっている
→https://faq.support.biglobe.ne.jp/faq_detail.html?id=11426

selectboxのview

<div class="row mt-2">
<div class="col-sm-2 px-sm-2 pr-sm-2 px-3 py-3 text-sm-right text-center">
<div class="badge-items badge-deepblue">
カテゴリー<small>(※)</small>
</div>
</div>
<div class="col-sm-10 pr-sm-4 py-3 px-4">
<div class="contentbox text-sm-left text-center">

<div class="wrap--outer mb-4">
<div class="wrap--inner">

<div class='wrap nonedis' id=hierarchy_1_block>
<span class="help-block_select_category" id="hierarchy_1_notice">
<strong>選択して下さい</strong><br>
</span>
<span class="help-block_select_category" id="hierarchy_1_notice_theme">
<strong>選択中のカテゴリーで投稿します</strong><br>
</span>
<select name='data_category_path[]' size=5 class='list filterSelect' data-target=hierarchy_2 id=hierarchy_1 >
<option class="disable_check hierarchy_1_option 1_" value="1001"
data-reference="1001"
data-belongsto=""
onclick="visible_handling(1,1001)" >
業界共通
</option>
<option class="disable_check hierarchy_1_option 1_" value="1002"
data-reference="1002"
data-belongsto=""
onclick="visible_handling(1,1002)" >
業界固有
</option>
</select>
</div>





<div class='wrap nonedis' id=hierarchy_2_block>
<span class="help-block_select_category" id="hierarchy_2_notice">
<strong>選択して下さい</strong><br>
</span>
<span class="help-block_select_category" id="hierarchy_2_notice_theme">
<strong>選択中のカテゴリーで投稿します</strong><br>
</span>
<select name='data_category_path[]' size=15 class='list filterSelect' data-target=hierarchy_3 id=hierarchy_2 data-allowempty>
<option class="disable_check hierarchy_2_option 2_1001" value="1003"
data-reference="1003"
data-belongsto="1001"
onclick="visible_handling(2,1003)" >
カテゴリA
</option>
<option class="disable_check hierarchy_2_option 2_1001" value="1004"
data-reference="1004"
data-belongsto="1001"
onclick="visible_handling(2,1004)" >
カテゴリB
</option>
<option class="disable_check hierarchy_2_option 2_1001" value="1005"
data-reference="1005"
data-belongsto="1001"
onclick="visible_handling(2,1005)" >
カテゴリC
</option>
</select>
</div>

<div class='wrap nonedis' id=hierarchy_3_block>
<span class="help-block_select_category" id="hierarchy_3_notice">
<strong>選択して下さい</strong><br>
</span>
<span class="help-block_select_category" id="hierarchy_3_notice_theme">
<strong>選択中のカテゴリーで投稿します</strong><br>
</span>
<select name='data_category_path[]' size=15 class='list filterSelect' data-target=hierarchy_4 id=hierarchy_3 data-allowempty>
<option class="disable_check hierarchy_3_option 3_1003" value="1012"
data-reference="1012"
data-belongsto="1003"
onclick="visible_handling(3,1012)" >
カテゴリD
</option>
<option class="disable_check hierarchy_3_option 3_1003" value="1013"
data-reference="1013"
data-belongsto="1003"
onclick="visible_handling(3,1013)" >
カテゴリE
</option>
<option class="disable_check hierarchy_3_option 3_1003" value="1014"
data-reference="1014"
data-belongsto="1003"
onclick="visible_handling(3,1014)" >
カテゴリF
</option>
</select>
</div>

<div class='wrap nonedis' id=hierarchy_4_block>
<span class="help-block_select_category" id="hierarchy_4_notice">
<strong>選択して下さい</strong><br>
</span>
<span class="help-block_select_category" id="hierarchy_4_notice_theme">
<strong>選択中のカテゴリーで投稿します</strong><br>
</span>
<select name='data_category_path[]' size=15 class='list filterSelect' data-target=hierarchy_5 id=hierarchy_4 data-allowempty>
<option class="disable_check hierarchy_4_option 4_1012" value="1048"
data-reference="1048"
data-belongsto="1012"
onclick="visible_handling(4,1048)" >
カテゴリG
</option>
<option class="disable_check hierarchy_4_option 4_1013" value="1049"
data-reference="1049"
data-belongsto="1013"
onclick="visible_handling(4,1049)" >
カテゴリH
</option>
<option class="disable_check hierarchy_4_option 4_1013" value="1050"
data-reference="1050"
data-belongsto="1013"
onclick="visible_handling(4,1050)" >
カテゴリI
</option>
</select>
</div>

<div class='wrap nonedis' id=hierarchy_5_block>
<span class="help-block_select_category" id="hierarchy_5_notice">
<strong>選択して下さい</strong><br>
</span>
<span class="help-block_select_category" id="hierarchy_5_notice_theme">
<strong>選択中のカテゴリーで投稿します</strong><br>
</span>
<select name='data_category_path[]' size=15 class='list ' id=hierarchy_5 data-allowempty>
<option class="disable_check hierarchy_5_option 5_1032" value="1334"
data-reference="1334"
data-belongsto="1032"
onclick="visible_handling(5,1334)" >
カテゴリJ
</option>
<option class="disable_check hierarchy_5_option 5_1026" value="1081"
data-reference="1081"
data-belongsto="1026"
onclick="visible_handling(5,1081)" >
カテゴリK
</option>
<option class="disable_check hierarchy_5_option 5_1026" value="1082"
data-reference="1082"
data-belongsto="1026"
onclick="visible_handling(5,1082)" >
カテゴリL
</option>
</select>
</div>
</div>
</div>

起動させたいjs
datacategory_visible_handling.js

function visible_handling(hierarchy_num,category_id){

  document.getElementById('hierarchy_1_notice').style.visibility ="hidden";

  const from = hierarchy_num;
  var theme_check = theme.indexOf(category_id);

  // select theme
  if (theme_check >= 0){

    // notice
    for( var i=1; i<=count_hierarchy; i++){

    if(i<=from){
      document.getElementById('hierarchy_'+i+'_notice').style.visibility ="hidden";
      document.getElementById('hierarchy_'+i+'_notice').style.display ="block";
      document.getElementById('hierarchy_'+i+'_notice_theme').style.display ="none";
            if(i==from){
              document.getElementById('hierarchy_'+i+'_notice').style.display ="none";
              document.getElementById('hierarchy_'+i+'_notice_theme').style.display ="block";
              document.getElementById('hierarchy_'+i+'_notice_theme').style.visibility ="visible";
              }
          document.getElementById('hierarchy_'+i+'_block').style.display ="block";
          }
      else{
          document.getElementById('hierarchy_'+i+'_block').style.display ="none";
          }

      }

    }

else{

for( var i=1; i<=count_hierarchy; i++){

if(i<=(from+1)){
  document.getElementById('hierarchy_'+i+'_notice').style.visibility ="hidden";
  document.getElementById('hierarchy_'+i+'_notice').style.display ="block";
  document.getElementById('hierarchy_'+i+'_notice_theme').style.display ="none";
  if(i<(from+1)){
    document.getElementById('hierarchy_'+(1+i)+'_block').style.display ="block";
    document.getElementById('hierarchy_'+(1+i)+'_notice').style.visibility ="hidden";
    document.getElementById('hierarchy_'+(1+i)+'_notice').style.display ="block";
    }
  if(i==(from+1)){
   //option
   var thirdElement = document.getElementsByClassName('hierarchy_'+i+'_option');
   for (var k = 0; k < thirdElement.length; k++) {
   thirdElement[k].style.display ="block";}
   //notice
   document.getElementById('hierarchy_'+i+'_notice').style.display ="block";
   document.getElementById('hierarchy_'+i+'_notice').style.visibility ="visible";
    }
    }
    else{
     document.getElementById('hierarchy_'+i+'_block').style.display ="none";
    }
    }
    }
}

宜しくお願い致します。

Comments

[yambejp]

onclickに当たる部分がよくわからない
もっと簡単な例で提示されたほうがよいでしょう
onclickの問題か他の部分の問題か判断つきません

[gobindar]

yambejp様、修正依頼ありがとうございます。
該当のselectbox部分と、
起動させたいjsのみの記載にいたしましたので、
再度ご確認いただけませんでしょうか。

[yambejp]

それと、onclickはjsの処理なので、ソースはphpベースではなく
htmlベースで提示してください

[gobindar]

失礼致しました。修正致しました。
ご指摘、ありがとうございます。

[m.ts10806]

「ブラウザに出力されたHTMLを提示して」の意味かと。
viewファイルをそのまま提示されても他者では確認できない事のほうが多いので。
あくまでonclickが問題とすればLaravelやphpの要素は排除したほうが良いです。

[gobindar]

m.ts10806様
補足ありがとうございます。
今後気をつけます。
ご指摘の通り、質問文を変更致しました。

Answer 1

質問の趣旨はこういうことですか？

<select>
<option onclick="console.log(1)">1</option>
<option onclick="console.log(2)">2</option>
<option onclick="console.log(3)">3</option>
</select>

selectを変更して要素を選んだとき（つまりクリックしたとき）発火するかどうか？

確認しましたが、Win版firefoxとedgeでは反応しましたが
IEやchromeでは無反応です。
そもそもoptionのonclickは考え方がおかしくないですか？
selectのonchangeではいけないのでしょうか？

Comments

[gobindar]

yambejp様、
ご回答ありがとうございます。
ご回答を受けまして、質問文に
「前提」部分を追記致しました。

質問の趣旨は、selectボックス内のoptionを変動させることではなく、
selectボックス内の、どのoptionをクリックしたかによって、
別のselectボックスを出現させるかどうか判定するロジックを
onclickで起動させたい、
ということです。

当方のchromeでは機能しておりますので、
どこかが違っているのかと存じますが・・・

[yambejp]

いずれにしろIEではoptionは制限が多いのでclickには反応しないと思いますよ
IEを諦めるか、処理を変えるかです

[m.ts10806]

selectのonchangeでその時の選択値とって分岐すればいい話では・・・

[退会済みユーザー]

>> どこかが違っているのかと存じますが

ブラウザの仕様

[gobindar]

yambejp様
onchangeについて、詳細を理解しておらず、調べましたところ、
当課題は解決できました。
（optionのvalueを引数でjavascriptへ渡せる認識がなかったので、解決方法として
認識できておりませんでした）
ご教示大変ありがとうございました。

m.ts10806様
仰る通りの方法でうまくいきました。
度々お世話になり、大変ありがとうございます。

asahina1979様
同じChromeでも仕様（＝バージョン？）で動くものと動かないものが
あるということでしょうか・・・
どこまで確認するかは構築者の決めだと思うのですが、
最新バージョンのChromeでは動作していますので、
一旦は古いバージョンの対応は考えない方針で
行こうかと考えております。