プロが教える店舗＆オフィスのセキュリティ対策術

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

解決済

  • 質問者：mukku_maa
  • 質問日時：
  • 回答数：2件

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>

ご指導のほど、よろしくお願いいたします

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.1ベストアンサー

  • 回答者： taloo
  • 回答日時：

<li>などを使って、擬似的に<select>を作って下さい。



http://okwave.jp/qa3775659.html

この回答への補足

回答ありがとうございます。

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

よろしくお願いいたします

補足日時：2008/02/22 17:21
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： taloo
  • 回答日時：

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

この回答への補足

回答ありがとうございました。

おそらく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>

補足日時：2008/02/25 12:38
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報