ここから質問投稿すると、最大4000ポイント当たる!!!! >>

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&Aを探す

専門家回答数ランキング

専門家

※過去一週間分の回答数ランキングです。

Q質問する（無料）

他の専門家の回答をチェック

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qセレクトメニューで２つの項目や値を渡す方法はありますか？

良かったら教えてください。
セレクトメニューで２つの項目や値を渡す方法は
ありますか？
普通は、
<select name="test">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
と言う感じですが、
「テスト」を選ぶと
name="test1" name="test2"の項目で、
value="1111" value="2222"
選択項目は、１つですが、2つの項目、
2つの値を次のCGIに渡す事は、
可能でしょうか？
教えてください。

Aベストアンサー

たぶん ANo1 の elttac さんも、この質問の意味を
解釈するのに悩まれたと思いますが・・・

> 「テスト」を選ぶと
この行から質問文が意味不明になります（汗）
「テスト」ってなんでしょう？

> 選択項目は、１つですが、
> 2つの項目、2つの値を次のCGIに渡す事は
「選択項目が１つ」という点からすると
ANo1 さんの「項目を２つ以上選択する」という解釈
ではないのかなぁと思いまして、別の解釈を

<select name="test">
<option value="test1=1111&test2=2222">「テスト」</option>
</select>

ってしておけば、「テスト」を選択すると
test = "test1=1111&test2=2222"
という値が CGI に送られます。

あとは、送られてきた値を & で分割し
それぞれを = で分割し、前半を変数名・後半を値として
解釈すれば、いいわけです。

CGI の言語が Perl なのか PHP なのか、書いてないので
プログラム例を提示させてあげられなくて残念ですが
意図は伝わったでしょうか？

たぶん ANo1 の elttac さんも、この質問の意味を
解釈するのに悩まれたと思いますが・・・

> 「テスト」を選ぶと
この行から質問文が意味不明になります（汗）
「テスト」ってなんでしょう？

> 選択項目は、１つですが、
> 2つの項目、2つの値を次のCGIに渡す事は
「選択項目が１つ」という点からすると
ANo1 さんの「項目を２つ以上選択する」という解釈
ではないのかなぁと思いまして、別の解釈を

<select name="test">
<option value="test1=1111&test2=2222">「テスト」</option>
</select...続きを読む

他の回答も見る
ページトップページトップ

Q質問する（無料）

人気Q&Aランキング

おすすめ情報