こんばんは。
現在htmlとjavascriptを使ってあるプログラムを作っているのですが、質問があります。
htmlのセレクトメニューを作ると、以下の様になると思います。
<select name="example">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
これでは項目数が増える分だけoption文を書かなければならないと思います。
そこで、html文の中でSelect文を使いたい地点に到達したら、Javascriptを呼び出して、option文を指定した数だけ繰り返してくれるようにしたいのです。
例えば呼び出すときに、変数(何項目作るか)を1つもっていく。
持っていった変数が20ならば、option文を
<option value="1">1</option>
<option value="2">2</option>
・・・・
<option value="19">19</option>
<option value="20">20</option>
として、html文に返すようにしたいのです。
この様なことは可能でしょうか?
よろしくお願いします。
No.1ベストアンサー
- 回答日時:
処理自体は以下のような感じで
<script>
window.onload=function(){
var hoge=document.getElementById("hoge");
var l=hoge.options.length;
var max=20;
while(l++ < max){
var opt=document.createElement("option");
opt.setAttribute("value",l);
opt.appendChild(document.createTextNode(l));
hoge.appendChild(opt);
}
}
</script>
<select name="example" id="hoge">
<option value="1">1</option>
</select>
ただし、javascriptでselectを吐き出すということは、
環境依存になりますので、ユーザビリティーはさがります。
あまりお勧めできません。
なるほど。そのようなソースになるんですね。
ユーザビリティが低下するということで、考えた結果html内に書くことにしました。
ただ、とても勉強になりました。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript 電車の運賃を出すプログラムを作っています。 2 2022/06/22 09:36
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript 中百舌鳥駅と深井駅を入れ替えて選択しても同じ挙動にしたいです。 2 2022/06/24 18:45
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript 1度きりではなく、繰り返し、挙動が変わるようにしていただきたいです。 1 2022/07/03 15:50
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウン選択を変更すると、...
-
selectを変更不可にしたい
-
selectのすべての値を送信する方法
-
検索窓とプルダウンメニュー機...
-
ラジオボタンとプルダウンを連...
-
セレクトボックスで配列を呼び...
-
selectボックスで選択数を制限...
-
プルダウンの値によって活性・...
-
プルダウンのoptionの表示・非...
-
プルダウンの値をphpファイルへ...
-
3つの連動したプルダウンメニュ...
-
複数プルダウンで検索
-
<input>の選択肢をプルダウンメ...
-
JavaScriptで<select>の<option...
-
複数のプルダウンを1つにまとめ...
-
セレクトボックスの値を取得し...
-
2段階プルダウンで1段階目の選...
-
Selectボックスの一覧表示方法
-
scriptの日付計算について
-
disableとすることなく、ユーザ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
全てのselect要素をデフォルト...
-
javascriptでセレクトボックス...
-
Selectボックスの一覧表示方法
-
JavaScriptで<select>の<option...
-
プルダウン選択を変更すると、...
-
select要素のvalueを配列で取得...
-
selectを変更不可にしたい
-
<input>の選択肢をプルダウンメ...
-
ラジオボタンとプルダウンを連...
-
【JS】selectでchangeした時の...
-
VBScriptでHTMLのセレクトボッ...
-
リストボックス内の重複したも...
-
同じ名前のセレクトがある場合...
-
プルダウンの値によって活性・...
-
selectが変更されたらnameを指...
-
【javascript】連想配列からセ...
-
3つのselectでURLパラメータを...
-
複数のプルダウンを1つにまとめ...
-
selectボックスで選択数を制限...
-
セレクトボックスで配列を呼び...
おすすめ情報