フォームのセレクトのグループ選択、連動とかできそうなやつ

JavaScript 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>TEST</title>
<body>

<form name="form1" method="post" action="#">
  <fieldset>
    <legend>注文リスト</legend>

    <input type="radio" name="color_type" value="モノクロ" id="rd0" onclick="LIST(this.value);CALC()" checked>
      <label for="rd0">白黒</label>

    <input type="radio" name="color_type" value="カラー" id="rd1" onclick="LIST(this.value);CALC()">
      <label for="rd1">カラー</label>

    <select name="list" onChange="CALC()">

      <optgroup label="モノクロ">
        <option value="1800" >--------------A(100)</option>
        <option value="2100" >--------------B(200)</option>
      </optgroup>

      <optgroup label="カラー">
        <option value="10500" >--------------C(300)</option>
        <option value="11200" >--------------D(400)</option>
      </optgroup>

    </select>
    

    総枚数 <input type="text" size="10" name="num" value=""  onChange="CALC()"> 枚

    合計 <input type="text" size="10" name="total" value=""> 円

  </fieldset>
</form>

<script type="text/javascript">

var CALC = function () {
  document.forms[ 'form1' ].elements[ 'total' ].value =
    document.forms[ 'form1' ].elements[ 'list' ].value *
    document.forms[ 'form1' ].elements[ 'num' ].value;
 };

var SelectGroup = function ( target ) {
  var buffer = document.createElement( 'SELECT' );

  return function ( v ) {
    var obj, cnt;

    while( obj = target.firstChild ) buffer.appendChild( obj );
    
    for( cnt = 0; obj = buffer.childNodes[ cnt++ ]; )
      if( 'OPTGROUP' === obj.nodeName && obj.label == v ) {
        target.appendChild( obj );
        break;
      }
  }
};

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

LIST('モノクロ');


</script>

IEだと挙動がおかしいので修正

var SelectGroup = function ( target ) {
  var buffer = document.createElement( 'SELECT' );
  return function ( v ) {
    var obj, cnt;

    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 );
        /*@
        target.add( new Option() );
        target.length--;
        @*/
        break;
      }
  }
};