それぞれ違ったID箇所（かなりの量）を、リストボックスで選択するたびに、
「何たら」を違うものに表示させています。
<span id="1">何たら</span>
<span id="2">何たら</span>
<span id="3">何たら</span>
かなりの量で続く↓
if(document.hoge.list.value=1){
document.getElementById('1').innerHTML = 'こうたら';
}else if(document.hoge.list.value=2){
document.getElementById('2').innerHTML = 'こうたら';
}else if ....
リストボックスを選択（例えばID1）したときに変更するところまでは出来ている（ID1は”こうたら”になった）のですが、
再び違うID箇所が選択（ID2）されたときには、以前の変更箇所は初期に戻したい(ID2は”こうたら”に変更、ID1は”何たら”に戻したい)のです。
document.getElementById('1').innerHTML = '何たら';
ID2に上記を追加すればいいことはわかりますが、
リストの何を選ばれるか分かりませんので、現状ではIDの数だけ書かなければなりません。
やりたいことは上書きされるのではなく、選択するたびに新規の動作がほしい。
説明が悪いですが、よろしくお願いしますm(_)m
No.1
91
17
10pt
一度に変更されているのが一か所だけなら
みたいな処理にしたらどうですか
No.2
1036126
50pt
idに配列を使ってはいかがでしょうか。
下に例示します。
<span id="span[1]">どーたら</span> <span id="span[2]">こーたら</span> <span id="span[3]">あーたら</span> .... id = document.hoge.list.value; document.getElementById('span[' + i + ']').innerHTML = 'ふんがー';
回答をありがとうございます。
今回は違う方法をとりまししたが、IDの中に配列を入れる方法は使わないので参考になりました。
No.3
49732154
80pt
こういうこと？
41
38
<html>
<style>
</style>
<script>
var values = {
1: "あ",
2: "い",
3: "う",
"END": "end"
}
function xxx(sel) {
var id = sel.options[sel.selectedIndex].value
var e = document.getElementById(id)
if (sel.old) {
sel.old.e.innerHTML = sel.old.value
} else {
sel.old = {}
}
sel.old.e = e
sel.old.value = e.innerHTML
e.innerHTML = values[id]
}
</script>
<body>
<select id="list" onchange="xxx(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br>
<span id="1">A</span><br>
<span id="2">B</span><br>
<span id="3">C</span><br>
</body>
</html>
回答をありがとうございます。
1番シンプルで、勉強になりました。
No.4
365
100pt
出端をくじくようで申し訳ありませんが、IDの値を数字から開始してはいけません。
アルファベットから始まらなければHTML文法違反になります。
なので、次のHTMLを前提として簡単なソースコードにて回答いたします。
<span id="ID1">なんたら1</span><br />
<span id="ID2">なんたら2</span><br />
<span id="ID3">なんたら3</span><br />
<span id="ID4">なんたら4</span><br />
<span id="ID5">なんたら5</span><br />
<span id="ID6">なんたら6</span><br />
<span id="ID7">なんたら7</span><br />
<span id="ID8">なんたら8</span><br />
<span id="ID9">なんたら9</span><br />
<form action="#">
<select size="9" id="listbox" onchange="changeValue();">
<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>
<option value="6">かんたら6</option>
<option value="7">かんたら7</option>
<option value="8">かんたら8</option>
<option value="9">かんたら9</option>
</select>
<br />
<input type="button" value="リセット" onclick="reset(); changeValue();" />
</form>
要件としては「選択したもののみ、それに対応するID要素を書き換える。ただし、それ以外はデフォルト文字列にしたい。」
…というものですね。配列を用いれば至極簡単に実装できます。
要素数が増えても長くなるのは文字列を指定する初期化部分だけです。
<script type="text/javascript">
<!--
/*
* 変数初期化
*/
var idCount = 9; // 該当ID要素の個数を指定する
var defaltValues = new Array(); // 書き換え前の文字列を格納する配列
var newValues = new Array( // 書き換え後の文字列を配列に格納しておく
"", // ここは空値にしておく※
"かんたら1", // listboxのオプション1つ目が選択された時の変更文字列。
"かんたら2", // …以下同様。
"かんたら3",
"かんたら4",
"かんたら5",
"かんたら6",
"かんたら7",
"かんたら8",
"かんたら9"
);
// 書き換え前の文字列（デフォルト文字列）を取得して配列に格納しておく
for (var i = 1; i <= idCount; i++) {
defaltValues[i] = document.getElementById("ID" + i).innerHTML;
// 配列の添字は「0」からだが、紐付けしやすいように「添字1＝ID1」とする。
// つまり、配列先頭のdefaltValues[0]は空値とする。※
}
/*
* 書き換え実行
*/
function changeValue() {
selectedItem = document.getElementById("listbox").selectedIndex + 1;
for (var i = 1; i <= idCount; i++) {
// listboxで選択されたものに対応するIDの文字列を書き換える
if (i == selectedItem) {
document.getElementById("ID" + i).innerHTML = newValues[i];
}
// それ以外はデフォルト文字列に戻す
else {
document.getElementById("ID" + i).innerHTML = defaltValues[i];
}
}
}
//-->
</script>
回答をありがとうございます。
わかりやすい説明で時間をかけていただき恐縮です。
今回はinputのhiddenに、IDなどを保存する方法を取らせていただきましたが、
機会があればまたよろしくお願いいたします。
No.6
9117
100pt
ページ遷移を伴わないならクッキーを使う必要は無いと思います。
<html> <head> <script type="text/javascript"> // document.getElementById のエイリアス function $(id) { return document.getElementById(id) ; } // 変更内容 var a = [ "タカ", "トラ", "バッタ" ] ; // 変更処理 function onSelect() { // listbox の内容を取得 var i = document.hoge.list.value ; // 変更前の内容に戻す if (typeof(pi) != 'undefined') $('i' + pi).innerHTML = pc ; // 変更する id の内容を退避 pi = i ; pc = $('i' + i).innerHTML ; // 変更 $('i' + i).innerHTML = a[i-1] ; } </script> </head> <body> <span id="i1">なんたら 1</span><br /> <span id="i2">なんたら 2</span><br /> <span id="i3">なんたら 3</span> <form name="hoge"> <select onChange="onSelect();" name="list"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </form> </body> </html>
a-kuma3 さんのほうが余計な広域変数使わないのでいいですね。
あと、質問に有るように if 文を並べるよりは、 switch 文の方がいいでしょう。
回答をありがとうございます。
わかりやすくてとても参考になりました。
ただエイリアスを扱ったことがほとんどないので、
今後の変更もあるかもしれないと考えて、hidden に保存する方法をとりました。
（自分で理解するため）
ifはswitchに変更しましたが、選択が多いときはswitchを使うということですかね・・
No.7
2612
80pt
<p> <span id="word1">何たら</span><br> <span id="word2">何たら</span><br> <span id="word3">何たら</span> </p> <form> <select id="list"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <input type="button" value="変更" onclick="changeWord();"> <input type="button" value="リセット" onclick="resetWord();"> </form> <script> var words = [ 'こうたら1', 'こうたら2', 'こうたら3' ]; var lastChange; function changeWord() { var select = document.getElementById('list'); var number = select.value; var element = document.getElementById('word' + number); resetWord(); lastChange = { element: element, word: element.innerHTML }; element.innerHTML = words[number - 1]; } function resetWord() { if (lastChange) { lastChange.element.innerHTML = lastChange.word; } } </script>
変更を保存しておき、次回の変更で元に戻しています。
Cookieは「次回ページを開いたときのために現在の変更を保存しておきたい」ということであれば必要になりますが、そうでなければ使う必要はないと思います。
回答をありがとうございます。
私には1番わかりやすかったです。とても参考になりました。
rouge_2008
2010/12/11 12:06:34
tontonpokopoko
やちまう
2
1
1
回答をありがとうございます。
参考になりました。