javascript - 2 つの選択ボックスに分割された巨大な選択ボックス

Question

私は巨大な選択ボックスを示していると思うこの機能を持っています...

function loadChild() {  
    $configmodel = gbimport ( "listbingo.model.configuration" );
    $params = $configmodel->getParams ();   
    $adid = ( int ) JRequest::getVar ( 'adid', 0 );
    $parent = ( int ) JRequest::getVar ( 'catparentid', 0 );
    $selfid = ( int ) JRequest::getVar ( 'selfid', 0 ); 
    if (! $parent) {
        return false;
    } else {
        $catmodel = gbimport ( "listbingo.model.category" );
        //$children = $catmodel->getParentTreeForSelect(true, $parent);
        $cat_list = $catmodel->getParentTreeForSelect ( true, $parent );    
        $categories = array ();
        $categories [] = JHTML::_ ( 'select.option', '', JText::_ ( 'SELECT_CATEGORY' ), 'value', 'text' );
        foreach ( $cat_list as $cat ) { 
            $xtreename = str_replace ( ".", "", $cat->treename );
            $xtreename = str_replace ( " ", "-", $xtreename );
            $xtreename = str_replace ( "<sup>|_</sup>", "", $xtreename );       
            if ($cat->children > 0) {       
                $categories [] = JHTML::_ ( 'select.optgroup', JText::_ ( $xtreename ), 'value', 'text' );
            } else {
                $categories [] = JHTML::_ ( 'select.option', $cat->value, JText::_ ( $xtreename ), 'value', 'text' );           
            }       
        }       
        if((int)$adid>0)
        {
            $disarray = array ('class' => 'inputbox required', 'onChange' => 'processSubcat(this.value)','disabled'=>'disabled');
        }
        else
        {
            $disarray = array ('class' => 'inputbox required', 'onChange' => 'processSubcat(this.value)');
        }                                   
        $subcats = JHTML::_ ( 'select.genericlist', $categories, 'scatid', $disarray, 'value', 'text', $selfid );           
        $view = $this->getView ( 'ajaxinput' );
        $view->setLayout ( 'subcat' );
        $view->assignRef ( 'subcats', $subcats );
        $view->assignRef ( 'adid', $adid );
        $view->assignRef ( 'selfid', $selfid );
        $view->display ();
    }
}

選択ボックスは次のようになります。

<select name="scatid">
<optgroup label="June">
<option>2005</option>
<option>2006</option>
<option>2007</option>
<option>2008</option>
</optgroup>
<optgroup label="July">
<option>2005</option>
<option>2006</option>
</optgroup>
</select>

数百のオプション (すべての selectbox) と数十の optgroups があります...

私が達成しようとしているのは、ある選択ボックスに optgroups を表示し、選択した optgroup のオプションを別の選択ボックスに表示することです...

誰かがこれを手伝ってくれませんか...何から始めればいいのかわかりません...私はjs/jqueryが苦手です...

選択するオプションが多すぎて、必要なものを見つけるために下にスクロールする必要があるため、このようにしたいと思います...

どうもありがとうございました。