jQuery एक ऑप्टग्रुप लेबल

Question

पर जाने के लिए मेरे पास खोज के लिए ड्रॉपडाउन सेटअप है। विचार यह है कि आप एक विकल्प पर क्लिक करते हैं, फिर OPTGROUP प्रकट होता है। एक बार लेबल का चयन करने के बाद मैं यह करना चाहता हूं कि यह OPTGROUP के उस खंड पर कूदता है।

मैंने अभी तक कुछ jQuery लिखा है। यह jsFiddle देखें - तो एक बार जब आप मुख्य श्रेणी चुनते हैं। मैं चाहता हूं कि ऑप्टग्रुप अपने जोड़ा लेबल पर जाए। इसे कैसे प्राप्त किया जा सकता है?

एचटीएमएल

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

पोर्ट्रेट लैंडस्केप स्क्वायर

जावास्क्रिप्ट

// 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 एल, यह थोड़ा hacky महसूस करता है, लेकिन यह क्रोम में काम करता है, और मैं तुम्हें यह उन सभी को में काम मिल सकता है एक छोटे से ब्राउज़र सूँघने और प्रत्येक ब्राउज़र में विकल्प आइटम ऊंचाइयों को निर्धारित करने के साथ विश्वास है कि:

// 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 को हटा दें। यह आपको कम से कम सही दिशा में इंगित करना चाहिए।

Answer 2

मैंने टिम का जवाब लिया और आगे में सुधार किया। यह अब गलत मल्टीइलेक्स्टबॉक्स व्यवहार को रोकने के लिए पहले आइटम का चयन नहीं करेगा और पहले बच्चे को (अब नहीं) चयनित बच्चे के बजाय ऑप्टग्राउप बच्चे को स्क्रॉल करेगा। मैंने इंडेक्स का उपयोग करके गिनती चर को भी हटा दिया और माता-पिता के आकार की विशेषता (कस्टम सीएसएस हाइट्स के साथ ब्रेक) के आधार पर विकल्प ऊंचाई निर्धारित की।

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