http://homepage1.nifty.com/chaki-el/pc/js/tips01 …
上記のページの先にある、擬似コンボボックスをhtml上に3つ配置したいです。
1つでは動作するのですが、2つ以上配置しようとすると全て動作しなくなります。
2つ目以降の配置に際し名前等の変更が必要になるのでしょうが、
細かい修正点がわかりません。
ご存知の方がいらっしゃいましたら宜しくお願いします。

A 回答 (3件)

参照URLのソースを使って具体的に3つの場合を、サンプルとして、アップしてみようと思いましたが、IEのみということだったので、同じような動作をするように自分なりに新しく書いてみました。


IEとFireFoxで動作確認しました。
FireFoxではリストを選ぶ時左クリックしたままドラッグして下さい。
---------8<----------8<----------8<-------------<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS">
<title>擬似コンボボックス</title>
<style>
<!--
input.combo { width:100px; }
select.combo { width:100px; display:none; }
//-->
</style>
<script type="text/javascript">
<!--
function showList(f, name){//リストを表示する
var text=f.elements[name+"TEXT"];
var list=f.elements[name+"LIST"];
var optSize=list.options.length;
if(text.value != ""){
var same=-1;
for(var i=0;i<optSize;i++){
if(list.options[i].value==text.value){//既にリストにある
same=i;
break;
}
}
if(same<0){//空白でなくリストに同じモノが無いとき追加
list.options[optSize] = new Option(text.value,text.value);
list.options[optSize].selected=true;
} else {
list.options[same].selected=true;
}
}
text.style.display="none";
list.style.display="inline";
list.focus();
}
function hideList(f, name){//リストを隠す
var text=f.elements[name+"TEXT"];
var list=f.elements[name+"LIST"];
text.value=list.options[list.selectedIndex].value;
text.style.display="inline";
list.style.display="none";
}
function disableList(f, n){
for(var i=1;i<=n;i++){
if(f.elements["Combo"+i+"LIST"].style.display=="inline"){
hideList(f, "Combo"+i);//リストが表示されたままの時の処理
}
f.elements["Combo"+i+"LIST"].disabled=true;
}
return true;
}
//-->
</script>
</head>
<body>
<h1 class=title>コンボボックスモドキ</h1>
<form name="FORM1" onsubmit="return disableList(this, 3)">
<input name="Combo1TEXT" class="combo" type="text" value="">
<select name="Combo1LIST" class="combo" onclick="hideList(this.form, 'Combo1')">
<option value="項目1">項目1</option>
<option value="項目2">項目2</option>
<option value="項目3">項目3</option>
<option value="項目4">項目4</option>
<option value="項目5">項目5</option>
</select><button onclick="showList(this.form, 'Combo1');return false;">▽</button>
<input name="Combo2TEXT" class="combo" type="text" value="">
<select name="Combo2LIST" class="combo" onclick="hideList(this.form, 'Combo2')">
<option value="項目あ">項目あ</option>
<option value="項目い">項目い</option>
<option value="項目う">項目う</option>
<option value="項目え">項目え</option>
<option value="項目お">項目お</option>
</select><button onclick="showList(this.form, 'Combo2');return false;">▽</button>
<input name="Combo3TEXT" class="combo" type="text" value="">
<select name="Combo3LIST" class="combo" onclick="hideList(this.form, 'Combo3')">
<option value="項目A">項目A</option>
<option value="項目B">項目B</option>
<option value="項目C">項目C</option>
<option value="項目D">項目D</option>
<option value="項目E">項目E</option>
</select><button onclick="showList(this.form, 'Combo3');return false;">▽</button>
<input type="submit" value="送信">
</form>
</body>
</html>
---------8<----------8<----------8<-------------
コンボボックスの数を変更する時に
<script>~</script>の部分は、特別触る必要はないです。
<input>~</button>までが1つの固まりで、数値の部分(?)を個数に合わせて変更します。
もし、複数のフォームがある時はフォーム毎の1~の番号です。
<input name="Combo?TEXT" class="combo" type="text" value="">
<select name="Combo?LIST" class="combo" onclick="hideList(this.form, 'Combo?')">
<option value="項目1">項目1</option>
<option value="項目2">項目2</option>
<option value="項目3">項目3</option>
<option value="項目4">項目4</option>
<option value="項目5">項目5</option>
</select><button onclick="showList(this.form, 'Combo?');return false;">▽</button>
また、
<form name="FORM1" onsubmit="return disableList(this, X)">
の部分は、Xの部分を最大のComboNのNに合わせます。
    • good
    • 0
この回答へのお礼

まずはご返信が遅れてしまい申し訳ございませんでした。
そしてその間にこの様なサンプルを挙げて頂き、ありがとうございました。

参考リンクのものより使い易く、
これを見て勉強したいと思います。

お礼日時:2005/04/11 17:40

>変数やelementsの値も変更しないと


そうですね、変数に関しては、渡す方を
実際の関数の中身は多分変更しないでいいと思うのですけど。
elementsの数は、
そのformに含まれる実際のテキストボックスやセレクトリストの数で数えます。

<form name="form1">←form[0]
<input type="text">←form[0].elements[0]
<select></select>←form[0].elements[1]
<input type="text">←form[0].elements[2]
<select></select>←form[0].elements[3]
</form>
    • good
    • 0

>2つ目以降の配置に際し名前等の変更が必要になるのでしょうが、


おっしゃるとおり、適切に名前を変更しないといけません。
試してはいないのですが、
ひと固まりとなる(コンボボックス)の数字の部分を
それぞれ1,2,3と3種類つけてやればいいように思います。

この回答への補足

アドバイスありがとうございます。

試してみたのですが変数やelementsの値も変更しないと上手く動作しないようで、
そこの変更方法がわからずに躓いております。

補足日時:2005/04/08 09:30
    • good
    • 0

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


人気Q&Aランキング