- 締切済み
HTMLのセレクトメニューとjavascript
ちょっとjavascriptが判らないので質問をさせてください。 HTMLのセレクトメニューで hoge1 hoge2 hoge3 といったようなメニューが複数あるのです。 でこの一つ目のメニューでhoge1を選択した場合には、二つ目のメニュー以降ではhoge1を選択できなくしたいのです。 このような時どのように記述すれば良いのでしょうか、教えてください。 よろしくお願いします。
- ttakeshi
- お礼率0% (0/2)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
作ってみました。 とはいえ投稿しないだけで作ることは良くありますが。 <select name="select1"> <option selected>hoge1 <option>hoge2 <option>hoge3 </select> <select name="select1"> <option>hoge1 <option selected>hoge2 <option>hoge3 </select> <select name="select1"> <option>hoge1 <option>hoge2 <option selected>hoge3 </select> <script> var sels; onload=function(){ sels=document.getElementByName('select1'); for(var i=0,s;s=sels[i];i++) s.onchange=check; } function check(e){ if(!e)e=event; e=e.target||e.srcElement; for(var i=0,s;s=sels[i];i++){ if(e==s) continue; if(s.selectedIndex==e.selectedIndex){ alert('同じのはダメ'); e.selectedIndex=-1; break; } } } </script> 全角スペースでインデントしてます。 同じ物が選択されていたらalert()ってだけですけど。 選択できない様にして、その後どうするかってのも問題になりますが。 選択した物と同じアイテムを他のセレクトフィールドから削除するなら、かなり面倒かなぁ。 行ではなく値でチェックするなら s.selectedIndexのかわりにs.options[s.selectedIndex].textやs.valueとe.～で。
- akanekor
- ベストアンサー率52% (102/194)
力押しで書いたらこんな感じ。 実際に書くときはもうちょいマシにしてください。 <html> <script type='text/javascript'> // メニュー1変更時処理 function chgMenuItem() { //メニュー数変更 menu2.length =2; // メニューの項目内容変更 if(menu1.value == '1') { chgOpParam(menu2,0,"hoge2",2); chgOpParam(menu2,1,"hoge3",3); }else if(menu1.value == '2') { chgOpParam(menu2,0,"hoge1",1); chgOpParam(menu2,1,"hoge3",3); }else if(menu1.value == '3') { chgOpParam(menu2,0,"hoge1",1); chgOpParam(menu2,1,"hoge2",2); } return 0; } // メニューのパラメータ変更（内部処理用） function chgOpParam(objMenu,iIndex,strTxt,strVal) { objMenu.options[iIndex].text = strTxt; objMenu.options[iIndex].value= strVal; } </script> <body> <select name='menu1' onchange='chgMenuItem()'> <option value='1'>hoge1 <option value='2'>hoge2 <option value='3'>hoge3 </select> <select name='menu2'> <option value='2'>hoge2 <option value='3'>hoge3 </select> </body> </html>
