複数選択の場合の方法がわからずに困っております。
ご教授くださいますようお願い申し上げます。
大項目Aというセレクトメニューがあり、選択項目が40コ程あります。
たとえば、Aのセレクトメニューの項目「靴」が選択されたら、
「靴」に関連する中項目のセレクトメニューがON(選択可能)になるといった感じで設置しております。
30コ程のセレクトメニューがあります。
下記がjavascriptの中身です。
function selectChange() {
var selectedNum = document.score.cate1.selectedIndex;
if(selectedNum == 01 | selectedNum == 02 | selectedNum == 03 | selectedNum == 04 | selectedNum == 05 | selectedNum == 06 | selectedNum == 07 | selectedNum == 08 | selectedNum == 09 | selectedNum == 10 | selectedNum == 11) {
document.score.co1.disabled = false;
document.score.co1.style.backgroundColor='#ffffff';
} else {
document.score.co1.disabled = true;
document.score.co1.style.backgroundColor='#efefef';
}
}
function selectChange2() {
var selectedNum = document.score.cate1.selectedIndex;
if(selectedNum == 01 | selectedNum == 02 | selectedNum == 03 | selectedNum == 04 | selectedNum == 05 | selectedNum == 06 | selectedNum == 07 | selectedNum == 08) {
document.score.so.disabled = false;
document.score.so.style.backgroundColor='#FFFFFF';
} else {
document.score.so.disabled = true;
document.score.so.style.backgroundColor='#EFEFEF';
}
}
function selectChange3() {
var selectedNum = document.score.cate1.selectedIndex;
if(selectedNum == 09) {
document.score.bl1.disabled = false;
document.score.bl1.style.backgroundColor='#FFFFFF';
} else {
document.score.bl1.disabled = true;
document.score.bl1.style.backgroundColor='#EFEFEF';
}
}
今まではこれで問題なく動いていましたが、
今回大項目Aを複数選択できるようにしました。
「靴」と「服」を選択した場合、
靴と服に関連する中項目をONにしたいのですが、先頭の「靴」のみしかONになりません。
いろいろ調べたのですが、さっぱりわからず困っております。
知識が少ないので、ご迷惑をおかけいたしますが宜しくお願いいたします。
No.1
- 回答日時:
selectedIndexで得られるのは先頭のインデックス番号のようです。
multipleを処理するのであれば、すべてのオプションをしらべて
selectedされていれば処理をいれるようにすべきでしょう。
サンプル:
<script language="javascript">
function test(f){
var cate1=f.cate1;
for(var i=0;i<cate1.length;i++){
if(cate1[i].selected) alert(cate1[i].value)
}
}
</script>
<form>
<select name="cate1" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<input type=button value="チェック" onClick="test(this.form)">
</form>
早速のご回答を有難うございます。
サンプルを試してみると、複数選択でも確かにアラートが出ていました。
これを、少し変えて複数選択で値を渡すようにすればいいのは理解できるのですが、色々さわってみても思ったような動作をしてくれません。
丁重にサンプルまで頂いたのに、理解不足(知識不足)で申し訳ございません。
まず、
function test(f){
var cate1=f.cate1;
for(var i=0;i<cate1.length;i++){
if(cate1[i].selected) alert(cate1[i].value)
}
}
をどの部分に追加すればよいでしょうか?
もう、ほんとに申し訳ございません・・・
No.2ベストアンサー
- 回答日時:
こんにちは
30個optionを書くの面倒だったので自動作成させてますのでwindow.onload=function(){ }は忘れてください
function op(){ }の部分が質問の回答になるかと思います
セレクトメニューで『0』『12』『28』を選択すると左のセレクトメニューが
『1』『18』を選択すると右のセレクトメニューが選択可能になり
それ以外を選択すると選択不可能になります
Ctrl+クリックで複数選択可です
IE6.0でしか機能確認はしていませんので他のでできなかったらごめんなさいm(--)m
<SCRIPT language="JavaScript">
<!--
window.onload=function(){
obj0=document.form.s0;
obj1=document.form.s1;
obj2=document.form.s2;
for(j=0; j<30; j++) {
obj0.options[j] = new Option(j);
obj1.options[j] = new Option(j);
obj2.options[j] = new Option(j);
}
}
//-->
<!--
function op() {
obj=document.form.s0;
if(obj.options[0].selected | obj.options[12].selected | obj.options[28].selected){ document.form.s1.disabled = false; }
else{ document.form.s1.disabled = true; }
if(obj.options[1].selected | obj.options[18].selected ){ document.form.s2.disabled = false; }
else{ document.form.s2.disabled = true; }
}
/-->
</SCRIPT>
<form name="form">
<select name="s0" multiple size="5"></select>
<input type="button" value="open" onclick="op()">
<select name="s1" disabled></select>
<select name="s2" disabled></select>
</form>
ご返事が大変遅くなり申し訳ございません!
ご丁寧に記述いただいたおかげで、思い通りの結果を得られました!!
本当に有難うございます!!
すごく助かりました。
有難うございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- CPU・メモリ・マザーボード Core i5 4570S の S って何ですか? 2 2022/08/04 20:16
- Ruby vscode 文字化け 1 2022/05/21 19:17
- CPU・メモリ・マザーボード DELL Vostro 3268に付けられるCPUを教えてください。以下にspecを載せてます。 4 2022/10/24 11:19
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- CPU・メモリ・マザーボード Intel® Celeron® M プロセッサ 360 動作周波数 1.40GHz か Broadc 3 2022/08/10 16:50
- Visual Basic(VBA) VBAの繰り返し処理について教えてください。 3 2022/08/02 13:21
- 据え置き型ゲーム機 Xbox Series X を買ったら、Xbox One の Xbox ワイヤレス コントローラー… 3 2023/04/28 10:50
- 数学 高校数学 数列の問題です。間違いを指摘してください。 2 2022/10/10 10:35
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- JavaScript html javascriptにてWeb SQLを操作したい。 2 2022/12/16 17:43
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
現在時刻を取得してフォームのs...
-
Selectの中身をfor文で入れる
-
jQuery セレクトボックスで選択...
-
Selectボックスの幅を自動で広...
-
親ウィンドウのリスト値変更
-
Pythonで会員サイトの自動ログ...
-
テキストボックスに入力された...
-
フォームの一部をPOSTで送信で...
-
this.formがundefined
-
正規表現で複数マッチ条件で悩...
-
複数のフォームを一括で自動送...
-
Selenium.ChromeDriverの使い方...
-
クリックさせたいが、click()が...
-
【掲示板の機能】投稿時にサイ...
-
追加ボタンを押した際に ok ボ...
-
クリック→フォーカスのある場所...
-
カレンダーの年月日の横に翌月...
-
フォームで入力した値を別のフ...
-
Javascript checkboxの入力チェ...
-
Imageオブジェクトを使って赤か...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウン 項目が多いので先頭...
-
Selectボックスの幅を自動で広...
-
Selectの中身をfor文で入れる
-
html selectの内容を初期値に戻す
-
CSVファイルを読みこみ、プルダ...
-
セレクトを全て選択されていな...
-
ブラウザの戻るボタンを押した...
-
JQuery selectが反映されない
-
jQuery セレクトボックスで選択...
-
セレクトの値を取得できない
-
テーブルにおける行(セルにプル...
-
現在時刻を取得してフォームのs...
-
javascriptでの2つのプルダウン...
-
document.form で nullまたは...
-
リストボックスの項目の順番を...
-
onFocusOutが複数回呼ばれる!
-
javascriptでselectボックスの<...
-
プログラムがうまく動きません...
-
親子連動型のselectを設置し、...
-
selectタグに直接onChangeを書...
おすすめ情報