• 締切済み

selectboxのoptionタグのvalue以外の値を表示したい

selectboxのoptionタグにvalue以外に、titleに値を持たせて、その値を表示したいと考えています。 IE7はうまくいきますが、IE6でうまくいきません。 Javascriptで、IE6でも動作できるように実現したいです。 やりたいことは、選択肢「A」にマウスをあわしたら「B」が表示され 選択肢「AA」にマウスをあわしたら「BB」が表示されるように したいです。 <SELECT name=NAME_1 > <OPTION value="A" title="B">A</OPTION> <OPTION value="AA" title="BB">AA</OPTION> </SELECT> ご指導のほど、よろしくお願いいたします

みんなの回答

回答No.2

「階層 メニュー」などで検索するとサンプルが見つかると思います。

mukku_maa
質問者

補足

回答ありがとうございました。 おそらくMouseoverなどのことをおっしゃりたいのでしょうか。 確かに<li>とMouseoverなどを使えば実現可能とわかりました。 ありがとうございました。 ただ、SelectboxのoptionにMouseoverは使えるのでしょうか。 具体的には、以下の場合はどのように修正したらよろしいでしょうか。 よろしくお願いいたします <html> <head> <title>テスト</title> <script type="text/javascript" src="mouseselect.js" charset="EUC-JP"></script> <script Language="JavaScript"> <!-- function dispCaption(){ base.style.visibility="" text1.style.visibility="" } function eraseCaption(){ base.style.visibility="hidden" text1.style.visibility="hidden" } function SelectOption(parentValue, text, title, value, style, select) { this.parentValue = parentValue; this.setOption = function() { this.text = text; this.value = value; this.title = title; if(style) { this.style.cssText = style; } if(select) { this.selected = true; } this.onmouseover=dispCaption(); this.onmouseout=eraseCaption(); }; return this; } function SelectBox(id) { function getObject() { var obj = document.getElementById(id); if(!obj.options && ( (typeof obj.length) == "number") ) { if(obj.length > 0) { obj = obj[0]; } else { obj = null; } } return obj; } var options = []; this.registOption = function(option) { options[options.length] = option; }; var child = null; this.setChild = function(childObj) { child = childObj; }; this.make = function(parentValue) { var obj = getObject(); if(obj) { obj.options.length = 0; var opt = (parentValue != null) ? [] : options; if(parentValue != null) { for(var i = 0; i < options.length; i++) { if( (options[i].parentValue == null) || (options[i].parentValue == parentValue) ) { opt[opt.length] = options[i]; } } } obj.options.length = opt.length; for(var i = 0; i < opt.length; i++) { opt[i].setOption.call(obj.options[i]); } if(child) { child.make(obj.value); } } }; return this; var box1 = new SelectBox("sb1"); box1.registOption(new SelectOption(null, "", "", "0", "")); box1.registOption(new SelectOption(null, "野菜" , "", "1", "", "1")); box1.registOption(new SelectOption(null, "果物" , "", "2")); var box2 = new SelectBox("sb2"); box2.registOption(new SelectOption(null, "", "", "0", "")); box2.registOption(new SelectOption("1" , "キャベツ", "○○産キャベツ", "3", "", "1")); box2.registOption(new SelectOption("1" , "玉ねぎ", "○○産玉ねぎ", "4")); box2.registOption(new SelectOption("2" , "りんご", "あまくておいしい", "8")); window.onload = function() { box1.make(null); box2.make("1"); }; //--> </script> </head> <body> <div id="base" style="visibility:hidden;position:absolute;top:10;left:15;width:300;height:50;filter:progid:DXImageTransform.Microsoft.alpha(opacity=40)"> <p id="text1" style="font-size:12pt;font-weight:bold;visibility:hidden;background-color:black;color:#00FF40;position:absolute;top:20;width:80%;padding:5"> テスト </p> </div> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td><select name="JobClass_No1" id="sb1" onchange="box4.make(this.value);"></select></td> </tr> <tr> <td><select name="JobName_No1" id="sb2"></select></td> </tr> </table> </body> </html>

全文を見る
すると、全ての回答が全文表示されます。
回答No.1

<li>などを使って、擬似的に<select>を作って下さい。 http://okwave.jp/qa3775659.html

mukku_maa
質問者

補足

回答ありがとうございます。 すみません。初心者ですので、 > <li>などを使って、擬似的に<select>を作って下さい。 具体的にどのようにしたらいいでしょうか。 理解が乏しくてすみません よろしくお願いいたします

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • WEBの入力フォームにある<OPTION value=""> に値を入れたい

    お世話になります。 VBA でWEBの入力フォームにある<OPTION value=""> に値を入れたいのですがどのようにすればよいでしょうか? 手でするには「選択」ボタンを押したら (1)選択ボタンを押す前 <SELECT NAME="selectid" SIZE="10" multiple> <OPTION value="">                         </SELECT> (2)選択ボタンを押した後 <SELECT NAME="selectid" SIZE="10" multiple> <OPTION VALUE="251">AA <OPTION value="">          </SELECT> 選択ボタンを押さずにVBAでどのようにすれば、 (2)の状態になるのでしょうか? ※objIE.Document.getElementsByName("selectid")(0).Value =”251” だとエラーが出ます。 お手数ですがよろしくお願いします。

  • selectのoptionを操作する

    A、Bという2つのプルダウンメニューがあります。 Aにはaa、bb、ccという項目があらかじめ固定値で入っています。 Bは初期状態ではなにも表示されません。 Aのメニューからaaを選ぶと、Bにdd、eeという項目が表示されます。 Aのメニューからbb、ccを選んだ時はBのプルダウンメニューには何も表示されません。 Aからaaが選ばれたか判定するところまではできたのですが、Bのプルダウンメニューにdd、eeを表示させる方法がわかりません。 どのようにすればうまくいくでしょうか? HEAD部>> function GetMenu() { var index = tstFrm.menuA.selectedIndex; var str = tstFrm.menuA.options[index].value; if (str == "aa") { /************************************************/ /ここがわかりません /************************************************/ } } BODY部>> <form name="tstFrm" onChange="GetMenu()"> <select name="menuA"> <option value="aa">aa <option value="bb">bb <option value="cc">cc </select> <select name="menuB"> /************************************************/ /ここもわかりません /************************************************/ </select> menuAのvalueがaaの時に、menuBが <option value="dd">dd <option value="ee">ee menuAのvalueがbbまたはccの時に、menuBが <option value=""> となるようにしたいのです。 アドバイスお願い致します。 わかりにくくてすみません。

  • valueに値を持たせたい

    こちら(http://www.pori2.net/js/form/5.html)のサイトを参考にしながら、 セレクトボックスに関連性を持たせたのですが、下記の箇所のvalueに値を持たせるには どうしたらいいのでしょうか? このプログラムの場合、一つ目のセレクトボックスのセ・リーグ、パ・リーグの 選択によって好きなチームの選択肢が変わってくるのでどのように記述したらいいのか わからず困っています。 よろしくお願いします。 プログラム <p>好きなチームは?</p> <select name="team"> <option value="">*チーム選択</option> <option value=""></option> <option value=""></option> <option value=""></option> <option value=""></option> <option value=""></option> <option value=""></option> </select>

  • select option value が IE だけで動かない

    select の option 項目を追加する javascript を組んでいるのですが IE だけ項目追加ができません。Windows の Firefox2、Safari は期待 通りに項目が追加できました。 option.value を指定しないと IE でも追加できます。IE 専用に特別な 別プログラムが必要なのでしょうか。ご存知の方よろしくお願いします。 var selectBox = document.getElementById("select1"); var option = document.createElement('option'); option.setAttribute('value','my_value'); option.appendChild(document.createTextNode('my_text')); selectBox.appendChild(option); 3行目をコメントアウトすれば IE でも select にデータが追加され ますが、肝心の value がないのでプログラム的にダメなんです。

  • 検索フォーム nameがAもしくはBもしくはCの値が○○であれば、結果を表示させる

    以下のような検索フォームはできるでしょうか? 「name=AもしくはBもしくはC の値が○○であれば、結果を表示させる」 <SELECT name="AもしくはBもしくはC"> <OPTION value=""> 月を選択 </OPTION> <OPTION value="01">1月</OPTION> <OPTION value="02">2月</OPTION> <OPTION value="03">3月</OPTION> <OPTION value="04">4月</OPTION> </SELECT> 初心者なので、教えていただけると助かります。 よろしくお願いします。

  • プルダウンを選択していないときは、初期値(selected)の値を、選

    プルダウンを選択していないときは、初期値(selected)の値を、選択したときは選択値を、hiddenで渡したい。 ▽プルダウン例 <form> <select> <option value="0" selected>A</option> <option value="4">B</option> <option value="6">C</option> </select> </form> ↑上で選択した値(A or B or C)値を、↓下のvalue=「"hoge"」に渡したいです。 ※選択肢は3つだけではなくて、たくさんあります。 ▽input例 <input name="category_name" value="hoge" type="hidden"> ※formとかselectにid振っても構いません。 ※javascriptでやりたいです。

  • プルダウンメニュー(セレクトボックス)で、title表示。

    マウスをかざしたら、titleを使ってMsgを表示したいのですが、うまくいきません。 ソースはこんなカンジです。 <select name="test" title="ok!!"> <option value="a">あ <option value="b">い <option value="c">う <option value="d">え <option value="e">お </select> 資料を見ると、selectの属性にはちゃんとtitleはあるようなのですが…。 よろしくお願いしますm(_ _)m

    • ベストアンサー
    • HTML
  • <SELECT>タグでの selectを→間違い

    <SELECT>タグでの selectを初めに表示させたいのですが、 できますでしょうか。 先の質問、文を間違えました、すいません。 訂正します。 cが選択状態で、何も表示されず、 以下のbを選べば、2が表示されますが、 何も選んでいないとき、cを選択した状態で、 3を表示させておきたいのですが 可能でしょうか。 onloadで、読みだす方法とかで可能なのでしょうか。 よろしくおねがいいたします。 <p> <form name="test"> <select name="linkselect" onChange="n()"> <option value="">選択して下さい</option> <option value="1">a</option> <option value="2">b</option> <option value="3"selected>c</option> </select> </form> </p>

  • HTMLタグのoptionで

    画像の利用希望時間のところで時間を選択するようにしているのですが、 前の画面からPOST送信で送られた「$start1」という変数が選択された状態にしたいとおもっているのですが、どうもうまくいきません。 どなたかわかるかたいらっしゃったらお願いします。 したのコードは、利用時間の所のコードです。 <tr> <td>利用希望時間</td> <td> <select name="start1"> <option value="">-- <option>9<option>10<option>11<option>12 <option>13<option>14<option>15<option>16<option>17 <option>18<option>19<option>20<option>21 </select> : <select name="start2"> <option value="">-- <option>00 <option>30 </select> ~ <select name="end1"> <option value="">-- <option>9<option>10<option>11<option>12 <option>13<option>14<option>15<option>16<option>17 <option>18<option>19<option>20<option>21 </select> : <select name="end2"> <option value="">-- <option>00 <option>30 </select>

  • プルダウンのoptionの表示・非表示はできますか?

    JavaScriptを使ってプルダウン操作をしております。 一つ目のプルダウンで選択したあと2つ目のプルダウンのoptionの部分だけ表示・非表示をしたいのです。そんなことはできるのでしょうか? 下のソースで説明しますが、一つ目のリストで「あいうえお」を選択した時点で2つ目の選択リストの「ひらがな1」と「ひらがな2」だけを選択できるようにしたいのです。「カタカナ1」「カタカナ2」は非表示もしくは選択不可にできればいいのですが。 一つ目のプルダウンリスト <select name="formtype" onchange="form_indicate();"> <option value="AAA">あいうえお <option value="BBB">アイウエオ </select> 二つ目のプルダウンリスト <select name="formtype2"> <option value="aaa">ひらがな1 <option value="bbb">ひらがな2 <option value="ccc">カタカナ1 <option value="ddd">カタカナ2 </select>

インクが検知できません
このQ&Aのポイント
  • ブラザー製品のDCP-J577Nでインクが検知できないトラブルについて相談します。
  • 新しい純正のインクに交換してもインクが検知できない問題が発生しています。
  • Windows10で無線LAN接続されている環境で、ひかり回線を使用しています。
回答を見る