我有一个用于搜索的下拉菜单。想法是您单击一个选项,然后出现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')
{
}
});
最佳答案
嗯,感觉有点黑,但是它可以在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标签,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/10930606/