jQuery to go to an optgroup label

Question

I have a dropdown setup for searching. The idea is you click one option, Then the OPTGROUP appears. What I'd like to do is once the label is selected it jumps to that section of the OPTGROUP.

I have written some jQuery so far. See this jsFiddle - So once you select a main category. I would like the optgroup to go to its paired label. 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')
    {

    }
});

You should replace your `css()` calls by simple `show()` and `hide()`, without additional arguments. Even if just for readability. — Stefan Majewsky, Jun 07 '12 at 11:18
Very dirty hack: http://jsfiddle.net/aNhzY/2/. Works in Chrome, but I'm sure there's a better way. — pimvdb, Jun 07 '12 at 11:27
Nice, But option value 2,3 and 4 in FireFox load up alot further down their label. — StuBlackett, Jun 07 '12 at 11:31
Hm, it appears Firefox adds a 1px vertical padding in the select box. You'd need `- 1` instead of `+ 1`, but this would require browser sniffing. — pimvdb, Jun 07 '12 at 11:37
Add some reference id to each option group and then move to select the first child of your choice $("#"+CatValue+" option:first").attr("selected", "selected"); — Alex Ball, Jun 07 '12 at 11:39
Just a note - according to [this](http://stackoverflow.com/a/4240492/514749) there is visually no ` — pimvdb, Jun 07 '12 at 11:44
you can select the first element [Fiddle](http://jsfiddle.net/alex_ball/aNhzY/3/) — Alex Ball, Jun 07 '12 at 11:48
@Alex Ball: Chrome doesn't scroll automatically when selecting an option. — pimvdb, Jun 07 '12 at 11:50
I'm thinking its a stupid way of going about things now. I'm thinking of doing a seperate DB query to select 4 seperate lists and just show them based on the value of the first selection to load in the list. — StuBlackett, Jun 07 '12 at 12:21
@Stu Blackett: Sounds like a better user experience. Currently the first select is more or less redundant, and you can choose any category item in select #2 regardless of what you chose in select #1. — pimvdb, Jun 07 '12 at 14:04

Tim Hobbs · Answer 1 · 2012-12-22T00:18:18.277

Well, it feels a bit hacky, but it works in Chrome, and I am sure with a little browser sniffing and determining option item heights in each browser you could get it working 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 there is a little cleanup you could do too - like move optgroup++ and remove the - 1 from scrollTop - ewww. It should get you pointed in the correct direction at least.

score 1 · Answer 2 · answered Jul 14 '17 at 08:45

I took Tims answer and improved that further. It will no longer select the first item to prevent wrong Multiselectbox behavior and scrolls to first Optgroup child instead of the (no longer) selected child. I also removed the counting variable using index and determined the option height based on parents size attribute (breaks with 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

jQuery to go to an optgroup label

2 Answers2