jQuery 去一个 optgroup 标签答案

【问题标题】：jQuery to go to an optgroup labeljQuery 去一个 optgroup 标签
【发布时间】：2012-06-07 11:09:10
【问题描述】：

我有一个用于搜索的下拉设置。这个想法是您单击一个选项，然后出现 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')
    {

    }
});

【问题讨论】：

您应该用简单的show() 和hide() 替换您的css() 调用，而不需要额外的参数。即使只是为了可读性。
@StefanMajewsky - 注意。我现在已经关注了
非常肮脏的黑客：jsfiddle.net/aNhzY/2。在 Chrome 中工作，但我确信有更好的方法。
不错，但是 FireFox 中的选项值 2,3 和 4 在标签下方加载了很多。
嗯，Firefox 似乎在选择框中添加了 1px 的垂直填充。你需要- 1 而不是+ 1，但这需要浏览器嗅探。

标签： jquery optgroup

【解决方案1】：

嗯，感觉有点老套，但它可以在 Chrome 中运行，而且我相信通过浏览器嗅探和确定每个浏览器中的选项项高度，你可以让它在所有浏览器中运行：

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

jsfiddle

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

【讨论】：

【解决方案2】：

我接受了蒂姆斯的回答并进一步改进。它将不再选择第一项以防止错误的多选框行为，并滚动到第一个 Optgroup 子项，而不是（不再）选定的子项。我还使用索引删除了计数变量，并根据父母大小属性确定了选项高度（与自定义 css 高度中断）。

$('#category').change(function() {
    var cat = $("#category :selected").text();
    var $subcat = $('#subcategory');
    var optheight = $subcat.height() / $subcat.attr('size');
    $subcat.find('optgroup').each(function(index) {
        $optgroupFirstChild = $('#subcategory optgroup[label="' + $(this).attr('label') + '"]').children('option:first');
        if ($(this).attr('label') == cat) {
          $subcat.scrollTop($optgroupFirstChild[0].index * optheight + (index * optheight));
        }
    });
});

jsfiddle

【讨论】：