SELECTの要素を都度セットするJavaScriptを作りました。
下記ソースはSELECTの要素を一旦削除して、新しく1~
テキストボックスに入力した値までの要素を追加するscriptです。
<html>
<hade>
<script language="JavaScript"><!--
function creSel()
{
var to = Number(document.myFORM.myTEXT.value);
document.myFORM.mySELECT.options.length = 0;
for( i=0; i<to; i++ )
document.myFORM.mySELECT.options[i] = new Option(i+1);
document.myFORM.mySELECT.selectedIndex = 0;
}
// --></script>
</head>
<body>
<form name="myFORM">
数値:<input type="text" name="myTEXT">
<input type="button" onClick="creSel()" value="SET"><br>
<select name="mySELECT">
</select>
</form>
</body>
</html>
IE、FireFox、Opera等のブラウザでは問題なく動作しましたが、
Win版のSafariのみ正常に動作しません。
10とか20くらいの数値だと問題ありませんが、例えば25とか
入力して、一旦1~25までのSELECTにして、次に24と入力する
と25の要素が残ります。しかし、25は選択できない様です。
更に、26と入力すると、26は追加されません。
これはどうやら、SELECTメニューにスクロールバーが出るらへん
の要素数になると発生する問題の様です。
Win版Safariのバグだとは思われますが、
この問題を回避する何か良い方法は御座いませんでしょうか。
宜しくお願いします。
No.1ベストアンサー
- 回答日時:
optionの操作で問題が出るようですから、
selectごと作り直すようにすると、とりあえず解決するようです。
(selectをspanで囲って中身を作り直す)
<html>
<hade>
<script type="text/javascript">
function creSel(){
var SP = document.getElementById('S');
while(SP.firstChild)SP.removeChild(SP.firstChild);
var S = document.createElement('select');
S.name ='mySELECT';
var to = Number(myFORM.myTEXT.value);
for(var i=0;i<to; i++) {
var O = document.createElement('option');
O.appendChild(document.createTextNode(i+1));
S.appendChild( O );
}
SP.appendChild(S);
}
</script>
</head>
<body>
<form name="myFORM">
数値:<input type="text" name="myTEXT">
<input type="button" onClick="creSel()" value="SET"><br>
<span id="S"><select></select></span>
</form>
</body>
</html>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript HTMLでJavaScriptを使ってパスワードの強化判定のプログラムを作成しています。 一通り作っ 2 2022/10/19 01:41
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウン 項目が多いので先頭...
-
Win版SafariのSELECT要素追加に...
-
セレクトを全て選択されていな...
-
CSVファイルを読みこみ、プルダ...
-
html selectの内容を初期値に戻す
-
return trueとreturn falseの用...
-
JavaScriptde途中で、「exit」...
-
テキストボックスの値同士を比...
-
<JavaScript>tableタグを入力不...
-
onchangeイベントを強制的に発...
-
iframe内のformをサブミットす...
-
Tablesorteを2行一組でソートする
-
【jQuery】input nameの文字列...
-
セレクトボックスを2つ選択して...
-
javascriptでセレクトボックス...
-
プルダウンで作文!?
-
C言語クイックソートの比較総回...
-
リンク文字クリックでラジオボ...
-
JavaScript ログアウト処理
-
Selectボックスの一覧表示方法
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウン 項目が多いので先頭...
-
Selectボックスの幅を自動で広...
-
Selectの中身をfor文で入れる
-
html selectの内容を初期値に戻す
-
JQuery selectが反映されない
-
jQuery セレクトボックスで選択...
-
CSVファイルを読みこみ、プルダ...
-
セレクトを全て選択されていな...
-
現在時刻を取得してフォームのs...
-
セレクトの値を取得できない
-
リストボックスの項目の順番を...
-
onchange等のイベントハンドラ...
-
onFocusOutが複数回呼ばれる!
-
テーブルにおける行(セルにプル...
-
javascriptでプルダウンメニュ...
-
ブラウザの戻るボタンを押した...
-
javascriptでの2つのプルダウン...
-
<textarea>にプルダウンを表示...
-
selectタグに直接onChangeを書...
-
window.openで新しいタブが開か...
おすすめ情報