1

まず最初に、オプションを選択するための選択リストを作成しました。オプションが選択されると、ブートストラップ アコーディオン コンポーネントを使用して追加情報が下に表示されます。ここでどのように機能するかを確認してください - http://bootply.com/69516

したがって、上記も私が望むように機能しますが、かなりゴミに見えます-理想的には、ブートストラップドロップダウンボックスのように見せたいです。これを行うためのjqueryをいくつか見つけました（以下）。これは、jqueryが挿入されたbootplyフォークです- http://bootply.com/69518

残念ながら、それは機能しません。変換により、選択リストに元々あった「値」フィールドが削除されると思います。私はjqueryを使いこなすことができますが、まだ学んでおり、これは私には多すぎます!

jQuery(function($){
    $('select').each(function(i, e){
        if (!($(e).data('convert') == 'no')) {                                                    
            $(e).hide().wrap('<div class="btn-group" id="select-group-' + i + '" />');
            var select = $('#select-group-' + i);
            var current = ($(e).val()) ? $(e).val(): '&nbsp;';         
            select.html('<input type="hidden" value="' + $(e).val() + '" name="' + $(e).attr('name') + '" id="' + $(e).attr('id') + '" class="' + $(e).attr('class') + '" /><a class="btn" href="javascript:;">' + current + '</a><a class="btn dropdown-toggle" data-toggle="dropdown" href="javascript:;"><span class="caret"></span></a><ul class="dropdown-menu"></ul>');                                   
            $(e).find('option').each(function(o,q) {
                select.find('.dropdown-menu').append('<li><a href="javascript:;" data-value="' + $(q).attr('value') + '">' + $(q).text() + '</a></li>');                    
                    if ($(q).attr('selected'))
                        select.find('.dropdown-menu li:eq(' + o + ')').click();
            });
            select.find('.dropdown-menu a').click(function() {
                select.find('input[type=hidden]').val($(this).data('value')).change();
                select.find('.btn:eq(0)').text($(this).text());
            });
        }
    });
});
4

2 に答える 2

0

の最後にセミコロンがありません

$('select[name="panel"]').change(function(event){
    var selected = $(this).find('option:selected');
    var value = selected.attr("value");
    var name=  $(this).attr("name");
    var selector = '[for-field="'+name+'"]';
    $('.accordion-body'+selector).addClass('collapse');
    var selectorForValue = selector+'[for-value="'+value+'"]';
    var selectedPanel = $('.accordion-body'+ selectorForValue  );
    selectedPanel.removeClass('collapse');
})
于 2013-07-25T17:32:28.400 に答える