6

検索用のドロップダウン設定があります。1 つのオプションをクリックすると、OPTGROUP が表示されます。私がやりたいことは、ラベルが選択されると、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')
    {

    }
});
4

2 に答える 2

1

まあ、ちょっとハックな気がしますが、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 - ewww から - 1 を削除するなど、少しクリーンアップすることもできると思います。少なくとも正しい方向に向けられるはずです。

于 2012-06-07T13:11:48.543 に答える