jQuery转到optgroup标签

发布时间:2020-08-11 发布网站:编程之家
编程之家收集整理的这篇文章主要介绍了jQuery转到optgroup标签编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个用于搜索的下拉菜单.想法是你点击一个选项,然后出现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')
    {

    }
});

解决方法

好吧,它感觉有点hacky,但它适用于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-ewww中删除-1.它应该让你至少指向正确的方向.

总结

以上是编程之家为你收集整理的jQuery转到optgroup标签全部内容,希望文章能够帮你解决jQuery转到optgroup标签所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478
编程之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!