- ベストアンサー
javascriptでoptionタグを削除したり、削除する前の状態に
javascriptでoptionタグを削除したり、削除する前の状態に戻す 方法を教えていただきたく思います。 どなたかご教授ください。 よろしくお願いいたします。
- hunter_999
- お礼率19% (31/161)
- JavaScript
- 回答数3
- ありがとう数10
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
削除ではなく、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>
その他の回答 (2)
- think49
- ベストアンサー率59% (285/482)
#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.createComment
- fujillin
- ベストアンサー率61% (1594/2576)
No1様の回答のほうがスマートな気がしますが、style.display:none だと消えてくれないブラウザがあるみたいなので（Opera10、IE6など）、ご質問の通りに削除、復旧する例。 ＞削除する前の状態に戻す方法 の意味がよくわからないけれど、初期状態という意味と解釈すると最初の状態を保持しておかないとならない。 cloneNodeでザックリ保持しておくのが復旧も含めて簡単だと思いますが、Optionを追加したりの例示のために変数に記録する方法にしています。 基本的に、新しくoptionを作成するのはnew Option()で、（CreateElementなどでも可能） 削除するのは removeChilde() か直接 options.lengthを指定するなど。 以下あたりをご参考に http://1106.suac.net/johoB/JavaScript/jscripto.html#option http://javascriptist.net/docs/pract_dom_removechild.html ＜サンプル＞ <!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"> <!-- // 初期状態を記録（グローバル変数） var list = [], sel = document.getElementById('target'); var o, i = -1; while (o = sel.options[++i]) { list[i] = [o.text, o.value]; if (o.selected) list[i][2] = true; } // 選択項目を削除 function deleteOption() { var o, i = sel.options.length, f = true; while (o = sel.options[--i]) { if (o.selected) { sel.removeChild(o); f=!f; } else o.selected = false; //セレクト表示（反転）だけ残るブラウザがあるので全部消してる（↑） } if (f) alert("select item !!"); } // 初期状態に戻す function restoreOption() { sel.options.length = 0; for (var i =0; i<list.length; i++) { sel.options[i] = new Option(list[i][0], list[i][1]); if (list[i][2]) sel.options[i].selected = true; } } //--> </script> </body> </html> グローバル変数やonclickなどを利用しているので、そのへんは適当に修正してください。
補足
ご回答ありがとうございます。 ieとffで動作検証させていただきました。 削除ボタンで消える事は消えるのですが、 ieでエラーで停止してしまいました。
補足
ご回答ありがとうございます。 ieとffで動作検証してみたのですが、aトグルボタンを押すと aの要素は消えるのですが、もう一度押すと エラーで停止してしまいました。