やりたい事
csv ファイルを読み込む php を作っておいて、
html の中の select に ajax で option を追加したいです。
ソース
データファイル(data.csv)
csv
10,default 21,first 32,second 43,third
データファイル読み込みphp(read_data.php)
php
1<?php 2$file = file("data.csv"); 3foreach($file as $line) { 4 $array_data[] = explode(",", $line); 5} 6echo json_encode($array_data, JSON_UNESCAPED_UNICODE);
index.html
html
1<!DOCTYPE html> 2<html lang="ja" dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 <!-- https://developer.mozilla.org/ja/docs/Web/HTML/Element/select --> 9 <!-- メモ 10 この要素の内容は静的であり、編集可能ではありません。 --> 11 12 <select id="text"> 13 </select> 14 15 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 16 <script> 17 $(function() { 18 function set_select_via_ajax() { 19 $.ajax ({ 20 type: 'post', 21 url: 'read_data.php', 22 dataType: 'json', 23 }) 24 .done((data, textStatus, jqXHR) => { 25 var len = data.length; 26 for (var i = 0; i < len; i++) { 27 if (i == 0) { 28 $("#text").append("<option value=" + data[i][0] + " selected>" + data[i] [1]+ "</option>"); 29 } else { 30 $("#text").append("<option value=" + data[i][0] + ">" + data[i] [1]+ "</option>"); 31 } 32 } 33 }) 34 .fail((jqXHR, textStatus, errorThrown) => { 35 console.log('fail', jqXHR.status); 36 }) 37 .always(() => { 38 // console.log('always'); 39 }); 40 }; 41 42 function set_select_directory() { 43 var data = ["default", "first", "second", "third"]; 44 for (var i = 0; i < 4; i++) { 45 if (i == 0) { 46 $("#text").append("<option value='" + i + "' selected>" + data[i] + "</option>"); 47 console.log("<option value='" + i + "' selected>" + data[i] + "</option>"); 48 } else { 49 $("#text").append("<option value='" + i + "'>" + data[i] + "</option>"); 50 console.log("<option value='" + i + "'>" + data[i] + "</option>"); 51 } 52 } 53 } 54 55 // select を作成する 56 // set_select_directory(); 57 set_select_via_ajax(); 58 }) 59 </script> 60 </body> 61</html>
試したブラウザ
mac の chrome(バージョン: 67.0.3396.9)
win の edge(バージョン: 42.17134.0)
win の IE11(バージョン: 11.1.17134.0)
状況
chrome と edge ではプルダウンが表示されるのですが、
IE11 だけ
SCRIPT1002: 構文エラーです。test6 (24,50)
と表示され、プルダウンが表示されません。
試しに ajax を使わないで jQuery で option を作るバージョン(set_select_directory())を作ってみましたが、
それとは関係なく同じ場所で同じエラーが発生してプルダウンは表示されませんでした。
懸念事項
index.html のソースの中にもコメントで書きましたが、
https://developer.mozilla.org/ja/docs/Web/HTML/Element/select
に
この要素の内容は静的であり、編集可能ではありません。
とありました。
これだけ読むと IE11 での実装はそもそも出来ないのかなと思ってしまうのですが。
質問
-
IE11 は何が構文エラーだと言っているのでしょうか?
-
IE11 でもその他のブラウザと同様のプルダウンを作成するにはどうしたらいいのでしょうか?
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/07/27 00:15