オプションをなんたらかんたら（ちょっと・・・メモリーリークする）

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

http://oshiete.goo.ne.jp/qa/5857375.html
こういうのはどうだろう？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>TEST</title>
<style type="text/css">
</style>

<body>
　<form action="#">
　　<p>
　　　<input type="radio" name="color_type" value="モノクロ" id="rd0" checked="checked" onclick="LIST(this.value);">モノクロ
　　　<input type="radio" name="color_type" value="カラー" id="rd1" onclick="LIST(this.value);">カラー

　　　<select name="list">
　　　　<optgroup label="モノクロ">
　　　　　<option value="10" >A4</option>
　　　　　<option value="20" >B4</option>
　　　　　<option value="30" >A3</option>
　　　　</optgroup>

　　　　<optgroup label="カラー">
　　　　　<option value="50" >A4</option>
　　　　　<option value="70" >B4</option>
　　　　</optgroup>
　　　</select>
　　</p>
　</form>


<script type="text/javascript">

var SelectGroup = function ( target/*Element*/ ) {
　var buffer = document.createElement( 'SELECT' ); //だからdocumentを・・・

　return function ( v/*String*/ ) {
　　var obj
　　var cnt;

　　//elementだけをbufferに全部移動。それ以外削除
　　while( obj = target.firstChild　) {
　　　1 == obj.nodeType ? 
　　　　buffer.appendChild( obj ):
　　　　target.removeChild( obj );
　　}
　　
　　//ラベルが同一のものを戻す
　　for( cnt = 0; obj = buffer.childNodes[ cnt++ ]; )
　　　if( 'OPTGROUP' === obj.nodeName && obj.label == v ) {
　　　　target.appendChild( obj );
　　　　break;
　　　}

　}
};


var LIST = SelectGroup( document.forms[ 0 ].elements[ 'list' ] );

LIST('モノクロ');

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