フォームのセレクトの連動 - babu_babu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>Images</title>

<form action="#">
  <p>
    <select name="maker" onChange="chainSelect( event, 'type', 'abc' )">
      <option value="toyota">TOYOTA
      <option value="nissan">NISSAN
      <option value="honda">HONDA
    </select>

    <select name="type" onChange="chainSelect( event, 'abc')">
      <optgroup label="toyota">
        <option value="crown">CROWN
        <option value="MR-2">MR-2
      </optgroup>
      <optgroup label="nissan">
        <option value="GT-R">GT-R
        <option value="Z">Z
      </optgroup>
      <optgroup label="honda">
        <option value="NS-X">NS-X
        <option value="S2000">S2000
      </optgroup>
      <option value="">選択してください
    </select>

    <input typ="text" name="abc">
  </p>
</form>

<script type="text/javascript">
//@cc_on

//SELECT の GROUP 連動
//selectの中の、optionはoptgroupの最後に置かないとIE6で挙動が変。

var chainSelect = (function ( getElement ) {
  var buffer = [ ];
  
  return function ( evt, targetSelect /*, disabledSelect, ...*/ ) {
    var cnt = 0, o, s;
    
    if( 'string' !== typeof evt ) {
      var e = evt./*@if( @_jscript ) srcElement @else@*/ target /*@end@*/;
      var t = getElement( targetSelect );
      t.disabled = false;
      if( 'SELECT' !== t.nodeName ) return ;

      var n = t.name || t.id;
      var v = e.options[ e.selectedIndex ].value;
      var df, option;
      
      df = buffer[ n ] || t.ownerDocument.createDocumentFragment();
      
      //移動
      // while( option = t.firstChild ) df.appendChild( option );
      for( cnt = 0; option = t.childNodes[ cnt ]; )
        if( 'OPTGROUP' === option.nodeName )
          df.appendChild( option );
        else cnt++;

      //同一ラベルを戻す
      for( cnt = 0; option = df.childNodes[ cnt++ ]; )
        if( 'OPTGROUP' === option.nodeName && option.label == v )
          t.appendChild( option );
      
      t.selectedIndex = 0;
      
      buffer[ n ] = df;
      cnt = 2;
    }
    
    //対象を無効に
    while( s = arguments[ cnt++ ] )
      if( o = getElement( s ) ) o.disabled = true;
  };
})(
    function ( n ) {
      var d = document, e;
      if( 'string' === typeof n )
        e = d.getElementsByName( n )[0] || d.getElementById( n );
      return e || n;
    }
  );
chainSelect( 'type', 'abc' );
</script>