JQuery to go to optgroup label

Question

I have a dropdown setting for search. The idea is that you click one option, then OPTGROUP appears. What I would like to do is as soon as the label is selected, it goes to this OPTGROUP section.

I already wrote jQuery. See jsFiddle - So, as soon as you select the main category. I would like optgroup to switch to its paired tag. How can I achieve this?

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> 

Portrait Landscape Square

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

Well, it’s a bit hacked, but it works in Chrome, and I’m sure that using a small browser and determining the height of elements in each browser you can make it work in all of them:

 // 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

I am sure that you can do a little cleaning - for example, move optgroup ++ and delete - 1 from scrollTop - ewww. That should make you point in the right direction, at least.

Answer 2

I answered Tims and improved it further. It will no longer select the first element to prevent Multiselectbox from behaving improperly and scrolls the first child of the Optgroup instead of the selected (no more) selected child. I also removed the counting variable using the index and determined the height of the parameter based on the attribute of the size of the parents (broken into custom css heights).

 $('#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