的jQuery去的OPTGROUP标签

我有用于搜索下拉菜单设置。这个想法是你点击一个选项，然后出现OPTGROUP。我想要做的是一旦标签被选中，它就会跳转到OPTGROUP的那一部分。的jQuery去的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 &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>

肖像景观广场

的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') 
    { 

    } 
});

来源

2012-06-07 StuBlackett

你应该更换你的'CSS（）'通过简单的'显示（）的调用'和'隐藏（）'，无需额外的参数。即使只是为了可读性。 –

@StefanMajewsky - 注意。我已经按照现在 – StuBlackett

非常肮脏的黑客：http://jsfiddle.net/aNhzY/2/。适用于Chrome，但我相信有更好的方法。 – pimvdb

WEL L时，感觉有点哈克，但它在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中删除 - 1 - ewww。至少应该让你指出正确的方向。

来源

2012-06-07 13:11:48

我采取了蒂姆斯的答案，并进一步改善。它将不再选择第一项来防止错误的Multiselectbox行为，并滚动到第一个Optgroup子元素而不是（不再）选定的子元素。我还使用索引删除了计数变量，并根据父母大小属性确定了选项高度（打破了自定义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

来源

2017-07-14 08:45:26

的jQuery去的OPTGROUP标签

回答

相关问题