セレクトボックス(プルダウン)を外部ファイルから作成＋リストのデータを取得(JavaScript)
セレクトボックス(プルダウン)を外部ファイルから作成＋リストのデータを取得(JavaScript):
ユーザに数値を入力させる場合、セレクトボックス（プルダウン）があると楽。
だが、選択肢とそれに付随する数値が固定なら直接タグに書き込めばよいが、選択肢や数値が可変で外部ファイルとして管理したい場合がある。
その場合は、リストを格納している配列を別ファイルで作成し、読みだしてあげればい良い。
jQueryなどを使えばもう少しスマートに書けると思うが、自分の環境で導入ができなかったから素のJavaScriptでやる。
クリック時など細かく設定することもできるが、よほどのことがない限り一回読み出せば用済みになる。
一回だけ読みたい場合は、bodyタグなどにonload要素で実行させるればよい。
いろいろ選択⇒実行という流れにしたいなら、ボタンを使うと良い。
選択肢を別ファイルで管理したい
ユーザに数値を入力させる場合、セレクトボックス（プルダウン）があると楽。だが、選択肢とそれに付随する数値が固定なら直接タグに書き込めばよいが、選択肢や数値が可変で外部ファイルとして管理したい場合がある。
その場合は、リストを格納している配列を別ファイルで作成し、読みだしてあげればい良い。
jQueryなどを使えばもう少しスマートに書けると思うが、自分の環境で導入ができなかったから素のJavaScriptでやる。
HTMLを開いた時だけ別ファイルから読みだす
クリック時など細かく設定することもできるが、よほどのことがない限り一回読み出せば用済みになる。一回だけ読みたい場合は、bodyタグなどにonload要素で実行させるればよい。
選択肢表示.html
<body onload="readFirst()"> <select id="PullDownList"></select> </body>
一度だけ実行.js
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);
}
};
プルダウンリスト.js
//プルダウンメニューの配列(動的に指定するためのリスト)
var list = [
{val:"1", txt:"P1"},
{val:"2", txt:"P2"},
{val:"3", txt:"P3"},
{val:"4", txt:"P4"},
{val:"5", txt:"P5"},
];
作ったプルダウンの選択肢の情報を取得する
いろいろ選択⇒実行という流れにしたいなら、ボタンを使うと良い。情報取得ボタン.html
<input type="button" value="情報取得ボタン" onClick="get('PullDownList')">
情報取得.js
function get(idName) {
var chiceColor = document.getElementById(idName);
console.log(chiceColor.value);
}
コメント
コメントを投稿