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 ( "&nbsp;", "-", $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>

它有数百个选项（所有selctbox）和数十个optgroups ......

我想要实现的是在一个选择框中显示optgroups ...以及在另一个选择框中显示所选optgroup的选项......

有人可以帮我解决这个问题......我不知道该怎么开始......我不擅长js / jquery ......

我想要这样，因为有太多的选择可供选择，我必须向下滚动才能找到我需要的东西......

非常感谢你。

Answer 1

Jquery-ui-filter-select-widget可能会帮到你。

它具有您在上面的描述中提到的所有功能。

以下是少数Demos on JQuery select widget

实施例

HTML代码：

<select id="example" name="example">
  <optgroup label="test">
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
    </optgroup>
    <optgroup label="foo">
        <option value="orange">Orange</option>
        <option value="purple">Purple</option>
        <option value="yellow">Yellow</option>
        <option value="brown">Brown</option>
        <option value="black">Black</option>
    </optgroup>

JQuery代码：

$(document).ready(function(){
  $("#example").multiselect().multiselectfilter();;
});

巨大的选择框分为2个选择框

1 个答案: