• ベストアンサー

プルダウンメニューのvalue値取得について

お世話になります。 プルダウンメニューのvalue値を取得するのに以下のjavascriptとhtmlを作成しました。 3つのカテゴリプルダウンメニューのそれぞれのvalue値をflg_fileへ格納して、その値に対応したHTMLへジャンプという物なのですが、実際に動作させると、main_select02や03でvalue値を4、5と指定しているにもかかわらず、実際に動作させるとジャンプする先はlist_NO"1".htmlとなってしまっています。 これはvalue値がちゃんと取得できていないのか、それともプルダウンメニューは値を設定しても、上から自動的に1、2・・・となるのが仕様なのか、元々の作りがおかしいのか頭を悩ませています。 何がおかしいのか、ご教授頂けますようお願いします。 ■javascriptソース function flg_set(n) { switch(n){ case 1: flg_file = document.selectForm.main_select01.selectedIndex; break; case 2: flg_file = document.selectForm.main_select02.selectedIndex; break; case 3: flg_file = document.selectForm.main_select03.selectedIndex; break; } } function select_list() { parent.select.location.href = "list_NO"+[flg_file]+".html"; } ■HTMLソース <FORM NAME="selectForm"> <td width="10"> </td> <td width="120"><select name="main_select01" onChange="flg_set(1)" onFocus="this.blur()" style="font-size:12px; width:120px;"> <option value="0">▲カテゴリ(1)</option> <option value="1">┗ ページ(1)</option> <option value="2">┗ ページ(2)</option> <option value="3">┗ ページ(3)</option> </select></td> <td width="10"> </td> <td width="120"><select name="main_select02" onChange="flg_set(2)" onFocus="this.blur()" style="font-size:12px;width:120px;"> <option value="0">▲カテゴリ(2)</option> <option value="4">┗ ページ(4)</option> <option value="5">┗ ページ(5)</option> </select> </td> <td width="10"> </td> <td width="120"><select name="main_select03" onChange="flg_set(3)" onFocus="this.blur()" style="font-size:12px;width:120px;"> <option value="0">▲カテゴリ(3)</option> <option value="6" selected>┗ ページ(6)</option> </select> </td> <td width="10"> </td> <td width="100%"><input type="button" value="ページジャンプ" onClick="select_list();"> </td> </form>

質問者が選んだベストアンサー

  • ベストアンサー
  • may0430
  • ベストアンサー率54% (57/104)
回答No.1

こんばんは。 >これはvalue値がちゃんと取得できていないのか、それともプルダウン >ニューは値を設定しても、上から自動的に1、2・・・となるのが >仕様なのか、元々の作りがおかしいのか頭を悩ませています。 私自身初心者なのでプログラムの作りがおかしいかどうかは判断しかねますが、(ごめんなさい(_ _) value値を取得したいのならば、 flg_file = document.selectForm.main_select01.value; でいいのではないでしょうか? valueとselectedIndexは異なるプロパティです。 IndexNoは0から始まりますのでmain_select01では、たまたま、 main_select01のIndexNoとvalue値が一致していたということですね。

参考URL:
http://www.scollabo.com/banban/java/ref_12.html#option
shiogoma
質問者

お礼

アドバイス頂いたように直しましたら上手く行きました! なるほど・・・valueとselectedIndexは異なる物だったのですね!! なんでだなんでだーと悩んでいましたが、根本的なところを理解していなかったようでお恥ずかしい限りです。 遅い時間に有難う御座いました!!

その他の回答 (2)

  • MAN_MA_RUI
  • ベストアンサー率41% (426/1024)
回答No.3

もうちょっというとこういう形になります。 フォームオブジェクト名はformタグに指定されたnameの値、セレクトオブジェクト名はselectタグに指定されたnameの値。 document.フォームオブジェクト名.セレクトオブジェクト名.options[document.フォームオブジェクト名.セレクトオブジェクト名.selectedIndex].value

shiogoma
質問者

お礼

丁寧に二度も解説して頂いて真に有難う御座います! やはりselectIndex部分だったのですね。 組み合わせると色々と出来そうで、とても参考になりました! 遅い時間に有難う御座いました!!

  • MAN_MA_RUI
  • ベストアンサー率41% (426/1024)
回答No.2

document.selectForm.main_select01.options[document.selectForm.main_select01.selectedIndex].valueになるはずです。

関連するQ&A

  • 複数プルダウンでメニューを初期表示に戻したい

    No.157334でleaz024さんに「複数プルダウンメニュー」について教えてもらったものですが、ひとつ、追加したいことがあるので教えてください。 教えていただいたスクリプトは <script language="javascript"> <!-- function A_Li() {   Sel=document.Link1.OP.selectedIndex;   Ms=document.Link1.OP.options[Sel].value;   parent.main.location.href=Ms;} function B_Li() {   Sel=document.Link1.OP2.selectedIndex;   Ms=document.Link1.OP2.options[Sel].value;   parent.main.location.href=Ms;} // --> </script> <FORM name="Link1"> <SELECT name="OP" onChange="A_Li()" size="1"> <OPTION Value="main.htm" SELECTED>ページを選んでください <option value="main.htm">ぺージ1</option> <OPTION Value="abc.htm">ページ2 <OPTION Value="def.htm">ページ3 </SELECT> <SELECT name="OP2" onChange="B_Li()" size="1"> <OPTION Value="aaa.htm" SELECTED>ページを選んでください <option value="bbb.htm">ぺージ1</option> <OPTION Value="ccc.htm">ページ2 <OPTION Value="ddd.htm">ページ3 </SELECT> です。 例えば OP2のメニューをクリックしたあと OP3のメニューをクリックしたときにOP2のメニューが初期の 表示メニューに戻したいのですが、どう変えればよいでしょうか。 初心者なので本を見てみたのですがわかりませんでした。 どうぞよろしくお願いいたします。

  • 同一ページに複数のプルダウンメニュー

    同一ページに複数のプルダウンメニューをつけたいのですが、 どうすればよいのでしょうか。 下記のように1つはつけることができたのですが、 2つめから、どこをどう変えて追加すればよいのかわかりません。 <script language="javascript"> <!-- function A_Li(){ Sel=document.Link1.OP.selectedIndex; Ms=document.Link1.OP.options[Sel].value; parent.main.location.href=Ms;} // --> </script> <FORM name="Link1"> <SELECT name="OP" onChange="A_Li()" size="1"> <OPTION Value="main.htm" SELECTED>ページを選んでください <option value="main.htm">ぺージ1</option> <OPTION Value="abc.htm">ページ2 <OPTION Value="def.htm">ページ3 </SELECT> よろしくお願いします。

  • プルダウンメニュー

     こんばんは。 日時をプルダウンメニューで選択するのですが、 月が変わると、内容も変わるようにしたいと思っています。JavaScriptで、出来ると聞いたのですが、 やり方が解りません。 このように書いてみたのですが、 画面には何も表示されません。 助けてください。 <SCRIPT LANGUAGE = "JavaScript"> <FORM NAME="form1" METHOD="post"> if (mm = 2){ document.write("<SELECT NAME="dd1" onChange="document.form1.dd.value=dd1.options[d d1.selectedIndex].value"> <OPTION VALUE="00"> <OPTION VALUE="16">16 <OPTION VALUE="17">17 <OPTION VALUE="18">18 <OPTION VALUE="19">19 <OPTION VALUE="20">20 <OPTION VALUE="21">21 <OPTION VALUE="22">22 <OPTION VALUE="23">23 <OPTION VALUE="24">24 <OPTION VALUE="25">25 <OPTION VALUE="26">26 <OPTION VALUE="27">27 <OPTION VALUE="28">28 </SELECT>日"); } if ((mm = 4) || (mm = 6) || (mm = 9) || (mm = 11)){ document.write("<SELECT NAME="dd1" onChange="document.form1.dd.value=dd1.options[d d1.selectedIndex].value"> <OPTION VALUE="00"> <OPTION VALUE="16">16 <OPTION VALUE="17">17 <OPTION VALUE="18">18 <OPTION VALUE="19">19 <OPTION VALUE="20">20 <OPTION VALUE="21">21 <OPTION VALUE="22">22 <OPTION VALUE="23">23 <OPTION VALUE="24">24 <OPTION VALUE="25">25 <OPTION VALUE="26">26 <OPTION VALUE="27">27 <OPTION VALUE="28">28 <OPTION VALUE="29">29 <OPTION VALUE="30">30 </SELECT>日"); } else{入らないので省きます。 </FORM> </SCRIPT>

  • プルダウンメニューの利用

    htmlのプルダウンメニューを使用した値計算のインタフェースを作成したいと思っています。 プルダウンメニューに設定するメニュー項目に値を設定し、 onChangeを使用して、その値だけをPHPプログラムに渡すようにしたいのですが、 JavaScript部分をどのように書けばいいのか判りません。 どなたかご教授お願いいたします。 <form name="formtest" action="test.php" method="post"> <table> <tr> <th>カテゴリ*</th> <td> <SELECT NAME="iPlanet" onchange=""> <OPTION VALUE="9" selected>初期値 <OPTION VALUE="0">サンプル1 <OPTION VALUE="1">サンプル2 </SELECT> </td></tr> </table> </form> onchangeでValueの値をPHPに送りたいのです。 よろしくお願いします。

  • プルダウンについての質問です

    プルダウンメニューでリンク先にページを飛ばした後、ツールバーの <戻るボタン>でページを戻すと、同じプルダウンメニューのリンク先 には飛ばなくなってしまいます。 どうすればページを戻した後でも、同じプルダウンメニューのリンク 先に飛ばす事が出来るのでしょうか? 使ったHTMLは <FORM NAME="linkmenu"> <SELECT style="width: 220px" NAME="linklist" onchange="location=this.value"> <OPTION SELECTED>以下の項目から選択してください。</OPTION> <OPTION VALUE="index.html">1.テストページ1</OPTION> <OPTION VALUE="2.html">2.テストページ2</OPTION> <OPTION VALUE="3.html">3.テストページ3</OPTION> </SELECT> </FORM> というものです。

    • ベストアンサー
    • HTML
  • フレームを使用した複数プルダウンメニュー

    こんにちは。 よくある質問もみたのですが「複数のプルダウンメニュー」「フレームを使ったプルダウン」というのはあるのですが、 フレームを使用して左フレームに複数プルダウン、そこで選んだものを右フレームに表示させるというのが見つかりませんでした。 「複数のプルダウンメニュー」もつくれますし、「別フレームに表示させる」こともできるのですが、 プルダウンを増やしたとたんに動きません。 ネームを変えてもみたのですがうまくいきません。 フレームを二つつくって <FRAMESET cols="35%,65%"> <FRAME src="n_menu.htm" name="manu">←こっちにプルダウンメニュー <FRAME src="n_main.htm"name="main">←こっちに表示 目次のhtmファイルで <SCRIPT LANGUAGE="JavaScript"> function openPage() { var list = document.forms[0].urlList; parent.frames[1].location = list.options[list.selectedIndex].value; } </SCRIPT> </HEAD> <FORM> <SELECT NAME="urlList" onChange="openPage()"> <OPTION SELECTED VALUE="cover1.htm">朝の歌 <OPTION VALUE="1.htm">1番目のページ <OPTION VALUE="2.htm">2番目のページ <OPTION VALUE="3.htm">3番目のページ </SELECT> </FORM> #上記をコピペして増やしてみた↓ <FORM> <SELECT NAME="urlList2" onChange="openPage()"> <OPTION SELECTED VALUE="cover2.htm">夜の歌 <OPTION VALUE="4.htm">4番目のページ <OPTION VALUE="5.htm">5番目のページ <OPTION VALUE="6.htm">6番目のページ </SELECT> </FORM> これだと2本目が表示されません。 どうすればいいか教えていただけないでしょうか?

  • 複数のプルダウンメニューの作り方。

    ・Aリスト、Bリスト…とプルダウンメニューを複数含んだフォームを一つのhtmlに作りたいのですが、上手くいきません。 一つのフォームに一つのプルダウンメニューは上手くいくのですが、Javascriptを二つ並べると動かなくなります。 とりあえず関数名を重複しない様にしたらいいという事だけはネットで調べてわかりました。 今は、下記の状態になっています。 <script language="JavaScript"> <!-- function MENU(){ mySelect = document.myForm.myMenu.selectedIndex; location.href = document.myForm.myMenu.options[mySelect].value; } // --> </script> <form name="myForm"> <select name="myMenu" onChange="MENU()"> <option value="">A</option> <option value="a001.html">A001</option> <option value="a002.html">A002</option> <option value="a003.html">A003</option> </select> <select name="myMenu2" onChange="MENU()"> <option value="">B</option> <option value="b001.html">B001</option> <option value="b002.html">B002</option> <option value="b003.html">B003</option> </select> </form> ご指南の程宜しくお願いします。

  • プルダウンメニューのvalue値を連携したい。

    お世話になります。 初心者です。 下記のようなプルダウンメニューがあるのですが、 select name = "no" の1を選んだら その下の select name、 no_1、no_2、no_3、no_4、も 1になるよう、また select name = "no" の2を選んだら その下の select name、 no_1、no_2、no_3、no_4、も 2になるように連携したいのです、 またそれぞれのvalue値をPHPでPOSTしたいのです。 どうやったらできるのかわかりません サンプルプルグラム等でも良いので ご教授の程よろしくお願い致します。 <form name="name_no" id="name_no" method="post" onSubmit="return check()"> <select name = "no"> <option value = "1">1</option> <option value = "2">2</option> </select> <select name = "no_1"> <option value = "1">1</option> <option value = "2">2</option> </select> <select name = "no_2"> <option value = "1">1</option> <option value = "2">2</option> </select> <select name = "no_3"> <option value = "1">1</option> <option value = "2">2</option> </select> <select name = "no_4"> <option value = "1">1</option> <option value = "2">2</option> </select> </form> <input type="submit" >

  • プルダウンメニューからのリンクの貼り方

    FORMのプルダウンメニューからリンクをはっていますが、新しいページを開くのはどうしたら良いでしょう? 今は <select name="menu" size="1" onchange="location=this.options[this.selectedIndex].value"> と書いていて、同じページ内で別ページに移動します。 またプルダウンメニューからのリンクで、ページサイズを指定したり、スクロールバー、ツールバーの表示も指定したいのですが出来るのでしょうか? ご存知なかたはよろしくお願いします。

  • インラインフレーと複数プルダウンメニューのリンク方法

    はじめまして。他のインラインフレームとプルダウンメニューの質問と 回答も見たのですが、自分のスクリプトと状況とは異なるようで問題の 解決には至っていません。 どなたかご教示頂けますでしょうか。宜しくお願い致します。 質問:3つのプルダウンメニュー(フォームは3つ作成)をひとつの iframe に表示する際のスクリプトの書き方とターゲットの指定方法を 教えてください。 現在のスクリプトは下記の通りです。 <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- function menuLink(linkLoc) { if(linkLoc !="") { window.location.href=linkLoc;} } //--> </SCRIPT> </HEAD> <IFRAME src="impressum.html" align="middle" scrolling="AUTO" frameborder="0" name="iframe1" width="785" height="400"></IFRAME> <FORM> メニュー1<SELECT onchange="menuLink(this.options[this.selectedIndex].value)" style=': font-size : 13px;font-family : Verdana,"MS Pゴシック";line-height : 18px;width : 200px;position : fixed;'> <OPTION SELECTED>選択してください</OPTION> <OPTION VALUE="index.html">Home</OPTION> <OPTION VALUE="new.html">What's New</OPTION> <OPTION VALUE="gallery.html">Gallery</OPTION> <OPTION VALUE="diary.html">Diary</OPTION> <OPTION VALUE="map.html">Map</OPTION> <OPTION VALUE="profile.html">Profile</OPTION> </SELECT> </FORM <FORM> メニュー2<SELECT onchange="menuLink(this.options[this.selectedIndex].value)" style=': font-size : 13px;font-family : Verdana,"MS Pゴシック";line-height : 18px;width : 200px;position : fixed;'> <OPTION SELECTED>選択してください</OPTION> <OPTION VALUE="index.html">Home</OPTION> <OPTION VALUE="new.html">What's New</OPTION> <OPTION VALUE="gallery.html">Gallery</OPTION> <OPTION VALUE="diary.html">Diary</OPTION> <OPTION VALUE="map.html">Map</OPTION> <OPTION VALUE="profile.html">Profile</OPTION> </SELECT> </FORM> <FORM> メニュー3<SELECT onchange="menuLink(this.options[this.selectedIndex].value)" style=': font-size : 13px;font-family : Verdana,"MS Pゴシック";line-height : 18px;width : 200px;position : fixed;'> <OPTION SELECTED>選択してください</OPTION> <OPTION VALUE="index.html">Home</OPTION> <OPTION VALUE="new.html">What's New</OPTION> <OPTION VALUE="gallery.html">Gallery</OPTION> <OPTION VALUE="diary.html">Diary</OPTION> <OPTION VALUE="map.html">Map</OPTION> <OPTION VALUE="profile.html">Profile</OPTION> </SELECT> </FORM> 見てお分かりの通り、プルダウンメニューとiframeへのつながりが ありません。。。どこにiframeへのターゲットを指定すれば良いかなど が分かりません。自分でも色々試しては見ましたがどんどん分からなく なってきてしまいました。宜しくお願い致します。