我有一个用于搜索的下拉菜单.想法是你点击一个选项,然后出现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 & 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)); } }); });
我相信你也可以做一些清理 – 比如移动optgroup并从scrollTop-ewww中删除-1.它应该让你至少指向正确的方向.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。