忍者ブログ
日々の研究生活のメモ書きなど

基本的に↓に書いてあるとおり

■ 参考 : セレクトボックス(プルダウン)を外部ファイルから作成+リストのデータを取得(JavaScript)


プルダウンの選択肢を事前に分けて、list.jsという名前で保存しておく
list.jsをhtmlソースコードの上の方で読み込む
<script type="text/javascript" src="js/list.js"></script>


bodyの下の方でscriptタグを用意して
その中に、データを読み込む関数を書く
function readFirst(){
for(var i=0;i<list.length;i++){
let opt = document.createElement("option");
opt.value = list[i].val; //value値
opt.text = list[i].txt; //テキスト値
document.getElementById("PullDownList").appendChild(opt);
}
};

listという配列はlist.jsの中に用意しておく
必要な要素は
{val:"1", txt:"P1"},
こんな感じ
txtは選択肢として表示される名前
valは選択されたときに渡される値
これがlistの個数だけ繰り返される


あとはこの関数をhtmlの読み込み完了後に実行すれば良い

元記事ではbodyタグにonloadを実行させて、読み込もうとしているが自分のところではうまくいかなかった
代わりに
window.onload = readFirst();
とbodyの下の方のjavascriptに書いたら動いた
なぜbodyのonloadではだめなのかは不明

どこまでjavascriptが動いているかをテストしたかったら
console.log('Hello1');
とか書けば、動いているのかわかる









PR
この記事にコメントする
Name
Title
Color
E-Mail
URL
Comment
Password   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
プロフィール
HN:coffee
職業:物理屋(自称)
趣味:映画鑑賞、登山
出身:大阪府の南の田舎
自己紹介:
import MyProfile
import coffee_pote from TWITTER
import amazonのほしい物リスト from WISH_LIST

print "生きてます"
print "コロナのせいで15万くらい損失出してますが、生きてます"

# 最終更新 2020/03/15
カウンター
カウンター カウンター
ブログ内検索
ツイートするボタン
リンク
相互リンク募集中です (Twitterにてお知らせください)

Demo scripts for gnuplot version 5
(gnuplotのさまざまなデモ画像と作り方がまとめられている、眺めているだけでできるようになった気分になれる)

gnuplotスクリプトの解説
(米澤進吾さんの個人ページ、gnuplotと言えばこのかた)

gnuplot のページ
(Takeno Lab、うちのブログがリンクされていたのでリンク返し)

とある物理の院生日誌~院生は社会へ旅立った~
(研究室の先輩の個人ブログ)

英語例文を見て自然に英語・英会話を学ぶ
(楠本慶ニさんの個人ページ、様々な情報の密度の高さに感動)

Twitterから映画の評価が分かる & 映画の鑑賞記録が残せる coco
(映画の感想をまとめられるサイト、いつもお世話になっています)

Astronomy Picture of the Day Archive
(天文や宇宙関連の最新の話題について画像とともにNASAが説明しているページ)

今日のほしぞら
(任意の時刻の空で見える星を表示してくれる、国立天文台が管理している)

GNUPLOTとアニメーション
(応用の項目の「見せてあげよう!ラピュタの雷を!!」あたりからすごすぎる)

読書メーター
(読んだ本をリストできる便利なサイト)

flickr難民の写真置き場
(20XX年、flickrは有料化の炎に包まれた。あらゆるflickr無料ユーザーは絶滅したかに見えた。 しかし、tumblr移住民は死に絶えてはいなかった。)

教授でもできるMac OS X へのLaTeX, X11, gccのインストレーションと環境設定
(阪大の山中卓さんのwebページ、タイトルにセンスが溢れている、内容は超充実してる、特にTeX関連、学振DCとかPDの申請書類作成時にはお世話になっております)

英語論文執筆用の例文検索サービス
(とんでもないものを見つけてしまった・・・・ arXivに収録されている 811,761報の 英語論文から,例文を検索するための検索エンジン)


Template "simple02" by Emile*Emilie
忍者ブログ [PR]