• 締切済み

HTMLのセレクトメニューとjavascript

ちょっとjavascriptが判らないので質問をさせてください。 HTMLのセレクトメニューで hoge1 hoge2 hoge3 といったようなメニューが複数あるのです。 でこの一つ目のメニューでhoge1を選択した場合には、二つ目のメニュー以降ではhoge1を選択できなくしたいのです。 このような時どのように記述すれば良いのでしょうか、教えてください。 よろしくお願いします。

みんなの回答

回答No.2

作ってみました。 とはいえ投稿しないだけで作ることは良くありますが。 <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)
回答No.1

力押しで書いたらこんな感じ。 実際に書くときはもうちょいマシにしてください。 <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>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • セレクトボックス ＨＴＭＬ javascript

    セレクトボックス ＨＴＭＬ javascript php セレクトボックスの複数選択についてですがご教授よろしくお願いいたします。たとえばセレクトボックスを二つ作り 一つ目のセレクトボックスを ・フルーツ ・寿司 ・カレー フルーツを選択すると二つ目のセレクトボックスの中が ・りんご ・みかん ・なし 寿司を選択すると二つ目のセレクトボックスが ・いくら ・まぐろ ・うに このように 一つ目のセレクトボックスの選択によって 二つ目のセレクトボックスの中身を変えるにはどのようなコードを組めば よろしいのでしょうか。 現在 php javascript mysqlの勉強しています。 ご教授いただければ幸いです。

    • ベストアンサー
    • HTML
  • JavaScriptでのSELECTプルダウンメニュー

    JavaScriptでHTMLで言うところのSELECTプルダウンメニューを作成するには、どのようなコードを書けばよろしいのでしょうか？ 御存知の方、参考になるサイトなどがありましたら教えてください。 お願いします。

  • セレクトメニューについて

    ＨＴＭＬでフォームを作っています。 セレクトメニュー（クリックするとメニューが出てきて一つ選ぶやつ）がいくらかあります。 前のセレクトメニューの選ばれたものによって、次のセレクトメニューの選択肢を変更するにはどうすればよいのでしょうか？ ｃｇｉの実行も可能です。 御願いします。

    • ベストアンサー
    • HTML
  • javaScriptで連動セレクトメニュー

    javaScriptで２つコンボの連動セレクトメニューを作りたいのですが、 下記URLを参考にしようと思っております。 http://homepage2.nifty.com/godakaz/laboratory/rel2sel2.html これに、[GO]ボタンをつけて、その[GO]ボタンを押すと、 各選択項目(上記URLの場合は右側の選択値)に指定したURLに飛ぶようにしたいのですが、、方法が分かりません。 参考になるサイト、アドバイス等宜しくお願いいたします。

  • セレクトメニューセレクトメニューへのジャンプ

    こんにちは。 セレクトメニューの選択項目に応じて、もう１つのセレクトメニューの内容を変更する方法は大体理解したのですが、 さらにもう一つ、＋もう一つ・・・とセレクトメニューの項目をリンクさせて変更することは可能でしょうか？ 例えば、 セレクトメニュー(1)　選択 　　↓　ジャンプ セレクトメニュー(2)　選択 　　↓　ジャンプ セレクトメニュー(3)　選択 　　↓　ジャンプ セレクトメニュー(4)　選択 　　↓ 検索用CGI実行　クリック というように選ばれた各項目ごとに次のセレクトメニューにジャンプして項目の変更を行いたいです。 参考サンプル等、 どなたか情報をお持ちの方がおりましたら、 よろしくお願いいたします。

  • [JavaScript+<select>]最初から５文字一致でセレクト状態にしたい。

    こんばんは。 ＨＴＭＬとＪａｖａＳｃｒｉｐｔで簡単な動的ページを作成しています。 そこで、行き詰っていることがありますのでご相談を・・・。 こういう<SELECT>があるとします・・・。 <FORM name="myform"> <SELECT name="menu"> <OPTION value="item1001">メニュー１</OPTION> <OPTION value="item2001">メニュー２</OPTION> </SELECT> </FORM> 初期値を「メニュー２」にしたい場合・・・これをJavaScriptで指定する場合、ONLOADのタイミングで・・・ document.myform.menu.value = "item2001"; とすればいけます。 今回は・・・"item2"だけの情報でヒットさせたいと思っています。 つまり、optionのvalue値の頭から５桁だけのマッチングでセレクト状態にさせたいのです。 ループという形をとらずにセレクトさせる方法を探しています。 テクニックをご教授下さい・・・。 宜しくお願い致します。

  • 同じセレクトメニューが1画面に複数ある場合

    同じ内容のセレクトメニュー（選択肢が50個くらい）を、同一画面上に何個も（10個以上）設定する場合ですが、ひとつひとつ書いていたのでは表示に時間がかかってものすごく重くなってしまいます。 どうせ同じ内容のセレクトメニューなので、ひとつ書いてそれを流用させることはできないものでしょうか？ Javascriptを使ってもかまいません。

    • ベストアンサー
    • HTML
  • セレクトメニューを4つ使いたいのですが

    セレクトメニューを4つ使いたいのですが 1つだけのセレクトメニューは、探せば見つかるのですが 4つともなると、見つかりません。 イメージとして左フレームに 色選択 柄選択 イメージ選択 価格の選択のセレクトメニューを使いたいのですが・・・ どなたか、回答お願いします。

  • HTML + JavaScript 外部CSVファイルを使用した<SELECT>タグの動的な生成

    下記のようなCSVを使用して、HTML上の<SELECT> の内容を動的に生成したいのです。 開催日,開催時刻,定員,予約済 2004/7/1,10:00,1,1 2004/7/1,11:00,1,0 2004/7/1,13:30,1,0 2004/7/1,14:30,1,0 2004/7/2,10:00,1,0 2004/7/2,11:00,1,0 2004/7/2,13:30,1,0 2004/7/2,14:30,1,0 2004/7/3,10:00,1,0 2004/7/3,11:00,1,0 2004/7/3,13:30,1,0 2004/7/3,14:30,1,0 具体的には、 (1) 日付のみが表示される<SELECT>を動的に生成。 (重複する日付は表示しない。つまり、上記の例では、2004/7/1、2004/7/ の件のみ) (2) 上記(1)の<SELECT>のonchangeイベントで、別の<SELECT>に選択された日付の空き状況を表示する。 ([定員] - [予約済み] = 0 なら表示しない。上記の例では、(1)の<SELECT>で2004/7/1を選択したとき、 (2)の<SELECT>には11:00、13:30、14:30 の3件が表示される) (3) 上記(1)の<SELECT>のonchangeイベントで、3番目の<SELECT>に1番目の<SELECT>で選択した日付の翌日 以降を表示する。(1番目の<SELECT>で2004/7/1 を選択した場合、2004/7/2、2004/7/3 の2件が表示される) (4) 上記(3)の<SELECT>のonchangeイベントで、4番目の<SELECT>に選択された日付の空き状況を表示する。 (以下、(2)と同様) 利用可能なのは、PHPとJavaScriptのみです。 ((1)のみPHPにて実装済み) HTML、JavaScriptでの実現は難しい気がしますが、アドバイスをお待ちしております。 (q=342549、525124 の2件には一応目を通していますが、本件に適応が可能か否か、判断を付けかねています)

  • セレクトメニューで

    セレクトメニューで フレームを使った、複数のセレクトメニューで 今の状態だと、上のセレクトメニューは問題ないのですが 下のセレクトメニューで選択すると、上のセレクトメニューの「更新」になるだけに なってしまいます。 要所の所だけ、記載しますので間違ってるところを教えてください。 <script type="text/javascript"> <!-- // 設定開始 var target = "right"; // 設定終了 function jump(){ var url = document.form1.select1.options[document.form1.select1.selectedIndex].value; if(url != "" ){ if(target == 'top'){ top.location.href = url; } else if(target == 'blank'){ window.open(url, 'window_name'); } else if(target != ""){ eval('parent.' + target + '.location.href = url'); } else{ location.href = url; } } } // --> </script> </head> <body> <TABLE border="0"> <TBODY> <TR> <TD><form action="#" name="form1"> <select name="select1" onChange="jump()"> <OPTION>　　メニュー</OPTION> </select> </form></TD> </TR> <TR> <TD><form action="#" name="form2"> <select name="select2" onChange="jump()"> <OPTION>　　メニュー</OPTION> </select> </form></TD>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する