html - ブートストラップでいくつかのオプションが選択されている場合、コンテンツを非表示/表示

Question

ユーザーが select/option タグを使用して 1 つのオプションを選択した場合、コンテンツを表示するにはどうすればよいですか? 私はブートストラップを使用しており、コンテンツを折りたたむ方法を知っていますが、これまたはボタンにチェックボックスを使用していますが、これを機能させることはできません..

誰かがそれを行う方法を知っていますか?

Answer 1

ブートストラップから折りたたみを使用できます：

HTML:

<select id="mystuff">
   <option value="0">-- Choose One --</option>       
   <option value="opt1">House</option>
   <option value="opt2">Car</option>
   <option value="opt3">Bicycle</option>
</select>

<div class="mystaff_hide mystaff_opt1">
    some content to show on option House selected
</div>
<div class="mystaff_hide mystaff_opt2">
    some content to show on option Car selected
</div>
<div class="mystaff_hide mystaff_opt3">
    some content to show on option Bicycle selected
</div>

JavaScript/jquery

//add collapse to all tags hiden and showed by select mystuff
$('.mystaff_hide').addClass('collapse');

//on change hide all divs linked to select and show only linked to selected option
$('#mystuff').change(function(){
    //Saves in a variable the wanted div
    var selector = '.mystaff_' + $(this).val();

    //hide all elements
    $('.mystaff_hide').collapse('hide');

    //show only element connected to selected option
    $(selector).collapse('show');
});

さらにコード ブロック接続が必要な場合は、1 つの選択オプションを実行し、クラス "mystaff_hide" とクラス "mystaff_[オプション値]" のみを追加します。

Answer 2

Bootstrap は jQuery の上に構築されているので、それを使用しましょう。

1. まず、選択コントロール (mystuff) に ID を割り当てます。
   <select id="mystuff">
2. 次に、その要素の値が変化するのを監視するよう jQuery に指示します。
   $('#mystuff').change(function() {
3. 次に、現在選択されている項目の値を取得します。
   opt = $(this).val();
4. 次に、どのオプションが選択されたかを判断します
   if (opt=="opt1"){} 。//オプションのテキストではなく値をテストしていることに注意してください
5. 最後に、いくつかの html を DIV に挿入します。id=msgbox
$('#msgbox').html('some html code');

Working jsFiddle example

HTML:

<select id="mystuff">
   <option value="0">-- Choose One --</option>       
   <option value="opt1">House</option>
   <option value="opt2">Car</option>
   <option value="opt3">Bicycle</option>
</select>

<div id="msgbox"></div>

JavaScript/jquery

$('#mystuff').change(function() {
    opt = $(this).val();
    if (opt=="opt1") {
        $('#msgbox').html('<h2>My House</h2>I have a large house on a quiet street');
    }else if (opt == "opt2") {
        $('#msgbox').html('<h2>My Car</h2>I drive an Audi A200');
    }else if (opt == "opt3") {
        $('#msgbox').html('<h2>My Bicycle</h2>I do not need a bicycle, I have a car.');
    }
});