jQuery, aby przejść do etykiety grupy optycznej

Question

Mam rozwijaną konfigurację wyszukiwania. Pomysł polega na kliknięciu jednej opcji, a następnie pojawi się OPTGROUP. To, co chciałbym zrobić, to po wybraniu etykiety przeskakuje do tej sekcji OPTGROUP.

Napisałem jQuery do tej pory. Zobacz tę jsFiddle - Po wybraniu głównej kategorii. Chciałbym, aby optgroup trafił do powiązanej etykiety. Jak mogę to osiągnąć?

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> 

Portret Krajobraz Plac

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

Wel l, to czuje się nieco hacky, ale działa w Chrome, i jestem pewien, ze trochę przeglądarka wąchania i ustalania wysokości pozycję opcji w każdej przeglądarce można dostać pracy w każdym z nich:

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

Jestem pewna, że ​​możesz wykonać trochę sprzątania - np. Przenieś grupę optgroup ++ i usuń - 1 z scrollTop - ewww. Powinien wskazać ci przynajmniej właściwy kierunek.

Answer 2

Wziąłem odpowiedź Tima i poprawiłem to dalej. Nie będzie już wybierać pierwszego elementu, który zapobiegnie niewłaściwemu zachowaniu Multiselectbox i przewinie się do pierwszego dziecka Optgroup zamiast (już nie) wybranego dziecka. Usunąłem także zmienną zliczającą za pomocą indeksu i ustaliłem wysokość opcji na podstawie atrybutu size parent (zrywa z niestandardowymi wysokościami css).

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