- 締切済み
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> ご指導のほど、よろしくお願いいたします
- mukku_maa
- お礼率60% (3/5)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
回答No.2
「階層 メニュー」などで検索するとサンプルが見つかると思います。
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
回答No.1
<li>などを使って、擬似的に<select>を作って下さい。 http://okwave.jp/qa3775659.html
質問者
補足
回答ありがとうございます。 すみません。初心者ですので、 > <li>などを使って、擬似的に<select>を作って下さい。 具体的にどのようにしたらいいでしょうか。 理解が乏しくてすみません よろしくお願いいたします
補足
回答ありがとうございました。 おそらく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>