jQuery转到optgroup标签

Question

我有一个用于搜索的下拉菜单.想法是你点击一个选项,然后出现OPTGROUP.我想做的是一旦选择了标签,它就会跳转到OPTGROUP的那一部分.

到目前为止我已经编写了一些jQuery.看到这个jsFiddle - 所以一旦你选择了一个主要类别.我希望optgroup转到配对标签.我怎样才能做到这一点？

HTML

<select id="category" name="category">
 <option selected="selected" value="0">Choose a category...</option>
 ...
 <option value="4">Photography</option>
</select>
<select multiple="multiple" id="subcategory" name="category_ids[]">
<optgroup label="Art Styles">
 <option value="5">Abstract</option>
 ...
 <option value="18">Graphics</option>
</optgroup>
<optgroup label="Art Subjects">
 <option value="19">Animals</option>
 ...
 <option value="45">Dreams &amp; Nighmares</option>
</optgroup>
<optgroup label="Media">
  <option value="46">Water Colour</option>
  ...
  <option value="56">Mixed Media</option>
</optgroup>
<optgroup label="Photography">
 <option value="57">Color Photography</option>
 ...
 <option value="64">Celebrity Photography</option>
</optgroup>

肖像景观广场

JavaScript的

// Search Options Dropdown

// Hide Subcategory Dropdown

$('#subcategory').css('display', 'none');

// Hide Orientation Dropdown

$('#orientation').css('display','none');

$('#category').change(function()
{
    $('#subcategory').css('display', 'block');
    $('#orientation').css('display', 'block');

    var CatValue = $("#category").val();

    if (CatValue == '1')
    {

    }
});

Answer 1

嗯，感觉有点 hacky，但它可以在 Chrome 中工作，而且我确信通过一些浏览器嗅探并确定每个浏览器中的选项项高度，您可以让它在所有浏览器中工作：

\n\n

// Search Options Dropdown\n// Hide Subcategory Dropdown\n$(\'#subcategory\').css(\'display\', \'none\');\n// Hide Orientation Dropdown\n$(\'#orientation\').css(\'display\', \'none\');\n$(\'#category\').change(function() {\n    var cat = $("#category :selected").text();\n    var $subcat = $(\'#subcategory\');\n    $(\'#orientation\').css(\'display\', \'block\');\n    var optcount = 0;\n    var optheight = 17;\n    $subcat.css(\'display\', \'block\').find(\'optgroup\').each(function() {\n        optcount++;\n        if ($(this).attr(\'label\') == cat) {\n            $subcat.val($(\'#subcategory optgroup[label="\' + $(this).attr(\'label\') + \'"]\').children(\'option:first\').val())\n                .scrollTop($(\'#subcategory :selected\')[0].index * optheight + ((optcount - 1) * optheight));\n        }\n    });\n});\xe2\x80\x8b\n

\n\n

jsfiddle

\n\n

我确信您也可以做一些清理工作 - 例如移动 optgroup++ 并从scrollTop - ewww 中删除 - 1 。它至少应该让你指向正确的方向。

\n