WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:セレクトボックスの連動(変更が可能にしたい)

0:[投稿] ひよっこ [2006/12/26 09:41 ] [環境:WIN2000 わかりません]

お世話になっています。

再び、行き詰まってしまっています。
ですので投稿させていただきました。
どうか宜しくお願いします。

セレクトボックスが二つあります(ボックス1とボックス2)。
この二つのセレクトボックスには同じ値が入っています(両方ともにA・B・C)。
ボックス1でAの値を選択すると、
ボックス2にもAの値が選択されるような状態になります。
ここまでは連動になると思います。
次に、ボックス2からも値を選択し直せて、
そうするとボックス1の値もボックス2で選択した値に変わる、
というものを作成したいと思っています。
どなたかお知恵をお貸しいただけませんでしょうか。


1:[回答] ティルド [2006/12/26 13:08 ]

<html><head><title>チェックボックスを共通に</title>
<script type="text/javascript">
function common(mode) {
    if (mode == 'A') {
        document.getElementById("SelectB").selectedIndex = document.getElementById("SelectA").selectedIndex;
    } else if (mode == 'B') {
        document.getElementById("SelectA").selectedIndex = document.getElementById("SelectB").selectedIndex
    } else { alert("関数の引数が不適切です。"); }
}
</script></head><body>
<select id="SelectA" onClick="common('A');">
<option>A</option><option>B</option><option>C</option>
</select>
<select id="SelectB" onClick="common('B');">
<option>A</option><option>B</option><option>C</option>
</select>
</body></html>

document.getElementById("SelectA").selectedIndexで、id属性にSelectAを設定しているセレクトボックスの、選択されている番号を収得することができます。
また、<select>にonClick="Common('A');"のようにすることで、セレクトボックスがクリックされた毎にCommon('A');というJavaScriptが実行されます。
Common('A')によって、function Common(mode) { }が呼び出されます。

こんな感じでしょうか。


2:[回答] 小倉 [2006/12/26 13:19 ]

<html>
<head>

<script language="JavaScript">
<!--

function share(flag, i){

if(flag == 0)
document.form1.test1.value = document.form1.test0.options[i].value;

else
document.form1.test0.value = document.form1.test1.options[i].value;

}
//-->
</script>

</head>
<body>
<form name="form1">
<select name="test0" onchange="share(0, this.selectedIndex)">
    <option value="a">値A</option>
    <option value="b">値B</option>
    <option value="c">値C</option>
</select>
<select name="test1" onchange="share(1, this.selectedIndex)">
    <option value="a">値A</option>
    <option value="b">値B</option>
    <option value="c">値C</option>
</select>
</form>
</body>
</html>

文章からでは何とも言えませんがこんな感じでどうでしょう。


3:[完了] ひよっこ [2006/12/26 13:55 ]

今回も解決に導いていただきまして
ありがとうございます。

ティルドさん。
前回も質問に丁寧に答えていただきました。
とてもわかりやすく解説していただいていて
本当に勉強になります。
getElementById()とselectedIndexを使用するのですね。
AにはBを、BにはAがメソッドで呼び出されるから
どちらからでもセレクトできて、連動も失われない、
ということなのですね。
ティルドさんはホームページなど運営していないのですか?
存在しているのでしたら是非教えて欲しいです!

小倉さん。
そのとおりです!
小倉さんの書いていただいたことがしたかったのです。
ありがとうございます。
flagを立てて値を持たせることもできるのですね。
一つのことにもいろいろな方法があることがわかりました。

知識拝借できましたこと、
今後にもっと生かしていきたいと思います。
お時間割いていただきまして
ありがとうございます!


回答(必須): 状態:

お名前(必須):

URL:




[戻る]