以下のソースのように、親子連動型のselectを作成しています。
ですが、特定の値にselectedを設定するところで行き詰っています。
例えば、
dai_komokuのselectedが大項目2で
chu_komokuのselectedが中2-3
というようなかたちです。
このような事は可能なのでしょうか?
可能であれば教えていただければ幸いです。
<script type="text/javascript">
<!--
function changelist(){
var num = document.forms["writeform"].dai_komoku.selectedIndex
var obj = document.forms["writeform"].chu_komoku.options
obj.length = 0
if(num==0){
obj[obj.length]=new Option("----------------","");
}
if(num==1){obj[obj.length]=new Option('中1-1','11')
obj[obj.length]=new Option('中1-2','12')
}else
if(num==2){obj[obj.length]=new Option('中2-1','21')
obj[obj.length]=new Option('中2-3','23')
}
if(obj.selectedIndex==-1)obj.selectedIndex=0
if(document.layers){
window.resizeBy(-10,-10)
window.resizeBy(10,10)
}
}
//-->
</script>
<form method="post" action="hoge.php" name="writeform">
大項目
<select name="dai_komoku" onchange="changelist()">
<option value="" selected>--選択してください--</option>
<option value='1'>大項目1</option>
<option value='2'>大項目2</option></select>
<br>
中項目
<select name="chu_komoku"></select>
</form>
No.2ベストアンサー
- 回答日時:
RHSBEさんこんにちは、papillon68と申します。
> obj[obj.length]=new Option('中2-3','23');
の直後に
obj[obj.length-1].selected = true;
を追加すれば「中2-3」が選択状態になります。
また、最後に追加したアイテムを選択状態にするということではなく、
特定のvalue(ここでは21や23など)を選択状態にしたいという場合は
以下のようにします。
for(var i=0; i<obj.length; i++) {
if(obj[i].value == '23') {
obj[i].selected = true;
break;
}
}
少し気になったのですが、
> var num = document.forms["writeform"].dai_komoku.selectedIndex
のように文の終わりに「;」をつけていないことが多いようです。
それでも動きますが、「;」はつけた方がいいと思います。
>特定のvalue(ここでは21や23など)を選択状態にしたいという場合
やりたいことはまさにこれでした。
for文を使うことによりうまく動作させる事ができました。
どうもありがとうございました。
No.3
- 回答日時:
> if(obj.selectedIndex==-1)obj.selectedIndex=0
if(obj.selectedIndex==-1)obj.selectedIndex=0;
else obj.selectedIndex=obj.length-1;
最後のアイテムを選択状態にするだけでしたらこれで十分でした。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript 2段階プルダウンで1段階目の選択を終えた後に選択ボックスを見えなくしたい 2 2022/07/05 21:58
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jQuery セレクトボックスで選択...
-
ラジオボタンでポップアップメ...
-
プルダウン 項目が多いので先頭...
-
html selectの内容を初期値に戻す
-
セレクトメニューで選択された...
-
ラジオボタンとドロップダウン...
-
【javascript・PHP】プルダウン...
-
UWSCのIE操作でプルダウンを選...
-
プルダウンとテキストの連動
-
現在時刻を取得してフォームのs...
-
<textarea>にプルダウンを表示...
-
セレクトボックスで現在選択さ...
-
javascriptでHTMLを絞り込み検...
-
グーグルマップの初期表示地点...
-
リストボックスの項目の順番を...
-
return trueとreturn falseの用...
-
追加ボタンを押した際に ok ボ...
-
チェックボックスのON/OFFでVal...
-
<form action="#">の意味とは?
-
フォームが空欄の時にフォーム...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウン 項目が多いので先頭...
-
Selectボックスの幅を自動で広...
-
Selectの中身をfor文で入れる
-
html selectの内容を初期値に戻す
-
CSVファイルを読みこみ、プルダ...
-
セレクトを全て選択されていな...
-
ブラウザの戻るボタンを押した...
-
JQuery selectが反映されない
-
jQuery セレクトボックスで選択...
-
セレクトの値を取得できない
-
テーブルにおける行(セルにプル...
-
現在時刻を取得してフォームのs...
-
javascriptでの2つのプルダウン...
-
document.form で nullまたは...
-
リストボックスの項目の順番を...
-
onFocusOutが複数回呼ばれる!
-
javascriptでselectボックスの<...
-
プログラムがうまく動きません...
-
親子連動型のselectを設置し、...
-
selectタグに直接onChangeを書...
おすすめ情報