javascriptでoptionタグを削除したり、削除する前の状態に

解決済

質問者：hunter_999
質問日時：2010/04/28 15:35
回答数：3件

javascriptでoptionタグを削除したり、削除する前の状態に戻す
方法を教えていただきたく思います。
どなたかご教授ください。
よろしくお願いいたします。

通報する

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

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： think49
回答日時：2010/04/28 16:30

削除ではなく、displayプロパティで表示/非表示を切り替えてみてはどうでしょう？

<form id="Test1" action="test.html">
　<p>
　　<select name="foo">
　　　<option value="a">A</option>
　　　<option value="b">B</option>
　　　<option value="c">C</option>
　　　<option value="d">D</option>
　　</select>
　</p>
　<p><input type="button" name="a" value="A"></p>
</form>
<script type="text/javascript">
document./*@cc_on @if(@_jscript) attachEvent('on' + @else @*/addEventListener(/*@end @*/ 'click', function (event) {
　var target = event.target || event.srcElement;
　if(target.nodeName != 'INPUT' || target.form.id != 'Test1' || target.name != 'a'){ return false; }
　console.log(target);
　var select = target.form.foo;
　console.log(select);
　var i = (select.selectedIndex + 1) % 4;
　select.options[i].style.display ? select.options[i].style.display = '' : select.options[i].style.display = 'none';
},false);
</script>

- 0
- 件

通報する

No.3

回答者： think49
回答日時：2010/04/28 21:00

#1です。

#2のコメントより引用。

> style.display:none だと消えてくれないブラウザがあるみたいなので（Opera10、IE6など）
おおおおお…、IE6はともかくOpera10でも消えないとは！
しかし、私は諦めなかった…。

<form id="Test1" action="test.html">
　<p>
　　<select name="foo">
　　　<option value="a">A</option>
　　　<option value="b">B</option>
　　　<option value="c">C</option>
　　　<option value="d">D</option>
　　</select>
　</p>
　<p><input type="button" name="a" value="A表示をトグル"></p>
</form>
<script type="text/javascript">
document./*@cc_on @if(@_jscript) attachEvent('on' + @else @*/addEventListener(/*@end @*/ 'click', function (event) {
　var target = event.target || event.srcElement;
　if(target.nodeName != 'INPUT' || target.form.id != 'Test1' || target.name != 'a'){ return false; }
　var select = target.form.foo;
　var i = 0;

　if(select.selectedIndex == i && select.value == 'a'){
　　select.selectedIndex = (i + 1) % select.length;
　}
　if(select.options[i].value == 'a'){
　　select.replaceChild(document.createComment(select.options[0].value + ',' + select.options[0].firstChild.nodeValue), select.options[0]);
　} else {
　　for(var j=0,childs=select.childNodes,l=childs.length,option,comment; j<l; j++){
　　　if(childs[j].nodeType == 8){
　　　　console.log(childs[j].nodeValue);
　　　　option = document.createElement('option');
　　　　comment = childs[j].nodeValue.split(',');
　　　　option.value = comment[0];
　　　　option.appendChild(document.createTextNode(comment[1]));
　　　　select.replaceChild(option, childs[j]);
　　　}
　　}
　}
},false);
</script>

document.createComment - MDC
https://developer.mozilla.org/en/DOM/document.cr …

この回答への補足

ご回答ありがとうございます。
ieとffで動作検証してみたのですが、aトグルボタンを押すと
aの要素は消えるのですが、もう一度押すと
エラーで停止してしまいました。

補足日時：2010/04/29 09:24

通報する

- 0
- 件

通報する

No.2

回答者： fujillin
回答日時：2010/04/28 18:50

No1様の回答のほうがスマートな気がしますが、style.display:none だと消えてくれないブラウザがあるみたいなので（Opera10、IE6など）、ご質問の通りに削除、復旧する例。

＞削除する前の状態に戻す方法
の意味がよくわからないけれど、初期状態という意味と解釈すると最初の状態を保持しておかないとならない。
cloneNodeでザックリ保持しておくのが復旧も含めて簡単だと思いますが、Optionを追加したりの例示のために変数に記録する方法にしています。

基本的に、新しくoptionを作成するのはnew Option()で、（CreateElementなどでも可能）
削除するのは removeChilde() か直接 options.lengthを指定するなど。
以下あたりをご参考に
http://1106.suac.net/johoB/JavaScript/jscripto.h …
http://javascriptist.net/docs/pract_dom_removech …

＜サンプル＞
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head><title>test</title></head>
<body>
<select id="target" size="6">
<option value="A">AAA</option>
<option value="B">BBB</option>
<option value="C" selected>CCC</option>
<option value="D">DDD</option>
<option value="E">EEE</option>
</select>
<input type="button" value="削除" onclick="deleteOption()">
<input type="button" value="復帰" onclick="restoreOption()">

<script type="text/javascript">

</script>
</body>
</html>

グローバル変数やonclickなどを利用しているので、そのへんは適当に修正してください。