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

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

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

Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

onclick

onclickとはユーザーのクリック処理を指します。これは"onmousedown"(押下)と"onmouseup"(押上)の二つの事象の組み合わせです

PHP

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

Q&A

解決済

1回答

7695閲覧

IE11でonclickが動かない

gobindar

総合スコア51

Internet Explorer

Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

onclick

onclickとはユーザーのクリック処理を指します。これは"onmousedown"(押下)と"onmouseup"(押上)の二つの事象の組み合わせです

PHP

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

0グッド

0クリップ

投稿2019/09/06 02:38

編集2019/09/06 03:16

お世話になっております。
当方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

html

1<div class="row mt-2"> 2<div class="col-sm-2 px-sm-2 pr-sm-2 px-3 py-3 text-sm-right text-center"> 3<div class="badge-items badge-deepblue"> 4カテゴリー<small>(※)</small> 5</div> 6</div> 7<div class="col-sm-10 pr-sm-4 py-3 px-4"> 8<div class="contentbox text-sm-left text-center"> 9 10<div class="wrap--outer mb-4"> 11<div class="wrap--inner"> 12 13<div class='wrap nonedis' id=hierarchy_1_block> 14<span class="help-block_select_category" id="hierarchy_1_notice"> 15<strong>選択して下さい</strong><br> 16</span> 17<span class="help-block_select_category" id="hierarchy_1_notice_theme"> 18<strong>選択中のカテゴリーで投稿します</strong><br> 19</span> 20<select name='data_category_path[]' size=5 class='list filterSelect' data-target=hierarchy_2 id=hierarchy_1 > 21<option class="disable_check hierarchy_1_option 1_" value="1001" 22data-reference="1001" 23data-belongsto="" 24onclick="visible_handling(1,1001)" > 25業界共通 26</option> 27<option class="disable_check hierarchy_1_option 1_" value="1002" 28data-reference="1002" 29data-belongsto="" 30onclick="visible_handling(1,1002)" > 31業界固有 32</option> 33</select> 34</div> 35 36 37 38 39 40<div class='wrap nonedis' id=hierarchy_2_block> 41<span class="help-block_select_category" id="hierarchy_2_notice"> 42<strong>選択して下さい</strong><br> 43</span> 44<span class="help-block_select_category" id="hierarchy_2_notice_theme"> 45<strong>選択中のカテゴリーで投稿します</strong><br> 46</span> 47<select name='data_category_path[]' size=15 class='list filterSelect' data-target=hierarchy_3 id=hierarchy_2 data-allowempty> 48<option class="disable_check hierarchy_2_option 2_1001" value="1003" 49data-reference="1003" 50data-belongsto="1001" 51onclick="visible_handling(2,1003)" > 52カテゴリA 53</option> 54<option class="disable_check hierarchy_2_option 2_1001" value="1004" 55data-reference="1004" 56data-belongsto="1001" 57onclick="visible_handling(2,1004)" > 58カテゴリB 59</option> 60<option class="disable_check hierarchy_2_option 2_1001" value="1005" 61data-reference="1005" 62data-belongsto="1001" 63onclick="visible_handling(2,1005)" > 64カテゴリC 65</option> 66</select> 67</div> 68 69<div class='wrap nonedis' id=hierarchy_3_block> 70<span class="help-block_select_category" id="hierarchy_3_notice"> 71<strong>選択して下さい</strong><br> 72</span> 73<span class="help-block_select_category" id="hierarchy_3_notice_theme"> 74<strong>選択中のカテゴリーで投稿します</strong><br> 75</span> 76<select name='data_category_path[]' size=15 class='list filterSelect' data-target=hierarchy_4 id=hierarchy_3 data-allowempty> 77<option class="disable_check hierarchy_3_option 3_1003" value="1012" 78data-reference="1012" 79data-belongsto="1003" 80onclick="visible_handling(3,1012)" > 81カテゴリD 82</option> 83<option class="disable_check hierarchy_3_option 3_1003" value="1013" 84data-reference="1013" 85data-belongsto="1003" 86onclick="visible_handling(3,1013)" > 87カテゴリE 88</option> 89<option class="disable_check hierarchy_3_option 3_1003" value="1014" 90data-reference="1014" 91data-belongsto="1003" 92onclick="visible_handling(3,1014)" > 93カテゴリF 94</option> 95</select> 96</div> 97 98<div class='wrap nonedis' id=hierarchy_4_block> 99<span class="help-block_select_category" id="hierarchy_4_notice"> 100<strong>選択して下さい</strong><br> 101</span> 102<span class="help-block_select_category" id="hierarchy_4_notice_theme"> 103<strong>選択中のカテゴリーで投稿します</strong><br> 104</span> 105<select name='data_category_path[]' size=15 class='list filterSelect' data-target=hierarchy_5 id=hierarchy_4 data-allowempty> 106<option class="disable_check hierarchy_4_option 4_1012" value="1048" 107data-reference="1048" 108data-belongsto="1012" 109onclick="visible_handling(4,1048)" > 110カテゴリG 111</option> 112<option class="disable_check hierarchy_4_option 4_1013" value="1049" 113data-reference="1049" 114data-belongsto="1013" 115onclick="visible_handling(4,1049)" > 116カテゴリH 117</option> 118<option class="disable_check hierarchy_4_option 4_1013" value="1050" 119data-reference="1050" 120data-belongsto="1013" 121onclick="visible_handling(4,1050)" > 122カテゴリI 123</option> 124</select> 125</div> 126 127<div class='wrap nonedis' id=hierarchy_5_block> 128<span class="help-block_select_category" id="hierarchy_5_notice"> 129<strong>選択して下さい</strong><br> 130</span> 131<span class="help-block_select_category" id="hierarchy_5_notice_theme"> 132<strong>選択中のカテゴリーで投稿します</strong><br> 133</span> 134<select name='data_category_path[]' size=15 class='list ' id=hierarchy_5 data-allowempty> 135<option class="disable_check hierarchy_5_option 5_1032" value="1334" 136data-reference="1334" 137data-belongsto="1032" 138onclick="visible_handling(5,1334)" > 139カテゴリJ 140</option> 141<option class="disable_check hierarchy_5_option 5_1026" value="1081" 142data-reference="1081" 143data-belongsto="1026" 144onclick="visible_handling(5,1081)" > 145カテゴリK 146</option> 147<option class="disable_check hierarchy_5_option 5_1026" value="1082" 148data-reference="1082" 149data-belongsto="1026" 150onclick="visible_handling(5,1082)" > 151カテゴリL 152</option> 153</select> 154</div> 155</div> 156</div>

起動させたいjs
datacategory_visible_handling.js

javascript

1function visible_handling(hierarchy_num,category_id){ 2 3 document.getElementById('hierarchy_1_notice').style.visibility ="hidden"; 4 5 const from = hierarchy_num; 6 var theme_check = theme.indexOf(category_id); 7 8 // select theme 9 if (theme_check >= 0){ 10 11 // notice 12 for( var i=1; i<=count_hierarchy; i++){ 13 14 if(i<=from){ 15 document.getElementById('hierarchy_'+i+'_notice').style.visibility ="hidden"; 16 document.getElementById('hierarchy_'+i+'_notice').style.display ="block"; 17 document.getElementById('hierarchy_'+i+'_notice_theme').style.display ="none"; 18 if(i==from){ 19 document.getElementById('hierarchy_'+i+'_notice').style.display ="none"; 20 document.getElementById('hierarchy_'+i+'_notice_theme').style.display ="block"; 21 document.getElementById('hierarchy_'+i+'_notice_theme').style.visibility ="visible"; 22 } 23 document.getElementById('hierarchy_'+i+'_block').style.display ="block"; 24 } 25 else{ 26 document.getElementById('hierarchy_'+i+'_block').style.display ="none"; 27 } 28 29 } 30 31 } 32 33else{ 34 35for( var i=1; i<=count_hierarchy; i++){ 36 37if(i<=(from+1)){ 38 document.getElementById('hierarchy_'+i+'_notice').style.visibility ="hidden"; 39 document.getElementById('hierarchy_'+i+'_notice').style.display ="block"; 40 document.getElementById('hierarchy_'+i+'_notice_theme').style.display ="none"; 41 if(i<(from+1)){ 42 document.getElementById('hierarchy_'+(1+i)+'_block').style.display ="block"; 43 document.getElementById('hierarchy_'+(1+i)+'_notice').style.visibility ="hidden"; 44 document.getElementById('hierarchy_'+(1+i)+'_notice').style.display ="block"; 45 } 46 if(i==(from+1)){ 47 //option 48 var thirdElement = document.getElementsByClassName('hierarchy_'+i+'_option'); 49 for (var k = 0; k < thirdElement.length; k++) { 50 thirdElement[k].style.display ="block";} 51 //notice 52 document.getElementById('hierarchy_'+i+'_notice').style.display ="block"; 53 document.getElementById('hierarchy_'+i+'_notice').style.visibility ="visible"; 54 } 55 } 56 else{ 57 document.getElementById('hierarchy_'+i+'_block').style.display ="none"; 58 } 59 } 60 } 61}

宜しくお願い致します。

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

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

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

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

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

yambejp

2019/09/06 02:42

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

2019/09/06 02:46

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

2019/09/06 02:49

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

2019/09/06 02:51

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

2019/09/06 02:56

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

2019/09/06 03:16

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

回答1

0

ベストアンサー

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

javascript

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

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

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

投稿2019/09/06 02:55

yambejp

総合スコア114572

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

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

gobindar

2019/09/06 03:09

yambejp様、 ご回答ありがとうございます。 ご回答を受けまして、質問文に 「前提」部分を追記致しました。 質問の趣旨は、selectボックス内のoptionを変動させることではなく、 selectボックス内の、どのoptionをクリックしたかによって、 別のselectボックスを出現させるかどうか判定するロジックを onclickで起動させたい、 ということです。 当方のchromeでは機能しておりますので、 どこかが違っているのかと存じますが・・・
yambejp

2019/09/06 03:10

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

2019/09/06 03:16

selectのonchangeでその時の選択値とって分岐すればいい話では・・・
退会済みユーザー

退会済みユーザー

2019/09/06 03:27

>> どこかが違っているのかと存じますが ブラウザの仕様
gobindar

2019/09/06 06:00

yambejp様 onchangeについて、詳細を理解しておらず、調べましたところ、 当課題は解決できました。 (optionのvalueを引数でjavascriptへ渡せる認識がなかったので、解決方法として 認識できておりませんでした) ご教示大変ありがとうございました。 m.ts10806様 仰る通りの方法でうまくいきました。 度々お世話になり、大変ありがとうございます。 asahina1979様 同じChromeでも仕様(=バージョン?)で動くものと動かないものが あるということでしょうか・・・ どこまで確認するかは構築者の決めだと思うのですが、 最新バージョンのChromeでは動作していますので、 一旦は古いバージョンの対応は考えない方針で 行こうかと考えております。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問