web-dev-qa-db-ja.com

Bootstrap 3ドロップダウン選択

ブートストラップを使用してサインアップフォームを再実装しようとしています。サインアップフォームには、会社の種類を表すドロップダウンリストが含まれています。オンラインで広範囲に検索しましたが、フォーム入力がドロップダウンになるような例は見当たりません。

ブートストラップには、さまざまなアクションに関連するドロップダウンの例がたくさんありますが、必要なのはドロップダウン入力です。私は2つの解決策を思いつきました。

最初：

<label>Type of Business</label>
<select class="form-control">
    <option>small</option>
    <option>medium</option>
    <option>large</option>
</select>

ここには問題があります。ボックス自体のスタイルは正しく設定されていますが、ドロップダウン自体にはスタイルが適用されていません。

enter image description here

2番目のバージョン：

<div class="btn-group">
    <button type="button" class="form-control btn btn-default dropdown-toggle" data-toggle="dropdown">
        Select Business type <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">small</a></li>
        <li><a href="#">medium</a></li>
        <li><a href="#">large</a></li>
    </ul>
</div>

これは素敵に見えます：

enter image description here

しかし、それはボタンです。オプションが選択されている場合、テキストを変更し、選択を対応する入力フィールドにバインドすることだけが必要なアクションを実行する必要はありません。

これらのアプローチはどちらも、私の行動にとって間違った選択であると考えられます。 Bootstrapには、入力フィールドにバインドされた単純なドロップダウン単一選択コンポーネントが含まれていないとは信じません。

私は何が欠けていますか？助けてください。

twitter-bootstrapdrop-down-menutwitter-bootstrap-3
26
AstroSharp

this を実現する場合は、ドロップダウンボタンを押したままにし、選択ボックスのようにスタイルを設定します。コードは here 以下です。

.btn {
    cursor: default;
    background-color: #FFF;
    border-radius: 4px;
    text-align: left;
}

.caret {
    position: absolute;
    right: 16px;
    top: 16px;
}

.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
    background-color: #FFF;    
}

.btn-group.open .dropdown-toggle {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6)
}

.btn-group {width: 100%}
.dropdown-menu {width: 100%;}

ボタンを選択ボックスのように機能させるために追加する必要があるのは、この小さなJavaScriptコードだけです。

$('.dropdown-menu a').on('click', function(){    
    $('.dropdown-toggle').html($(this).html() + '<span class="caret"></span>');    
})

複数 このようなカスタムドロップダウンがある場合、次のjavascriptコードを使用できます。

$('.dropdown-menu a').on('click', function(){    
    $(this).parent().parent().prev().html($(this).html() + '<span class="caret"></span>');    
})
21
paulalexandru

サイトをbootstrap 3に切り替えたところ、たくさんのフォームがありました...面白くありませんでしたが、いったんハングアップしても、それほど悪くはありません。

これはあなたが探しているものですか？ デモはこちら

<div class="form-group">
  <label class="control-label col-sm-offset-2 col-sm-2" for="company">Company</label>
  <div class="col-sm-6 col-md-4">
    <select id="company" class="form-control">
      <option>small</option>
      <option>medium</option>
      <option>large</option>
    </select> 
  </div>
</div>
21
Dan

選択したアイテムに「アクティブ」クラスを追加することもできます。

$('.dropdown').on( 'click', '.dropdown-menu li a', function() { 
   var target = $(this).html();

   //Adds active class to selected item
   $(this).parents('.dropdown-menu').find('li').removeClass('active');
   $(this).parent('li').addClass('active');

   //Displays selected text on dropdown-toggle button
   $(this).parents('.dropdown').find('.dropdown-toggle').html(target + ' <span class="caret"></span>');
});

jsfiddleの例 を参照してください

11
Nathalia Xavier

しばらくの間、ニースセレクトドロップダウンを探していましたが、良いものを見つけました。ここに置いておきます。そのbootsrap-selectと呼ばれる

こちら リンク。見てみな。編集可能なドロップダウン、コンボドロップダウンなどがあります。プロジェクトに追加するのは簡単です。

リンクが停止した場合、silviomoreto.github.ioでbootstrap-selectを検索するだけです。これは、通常の選択タグだからです。

4
Gokigooooks

Paulalexandruの答えを拡張し、bootstrapドロップダウンとメインボタンのコンテンツと選択したオプションの値を更新することで一般的に機能する完全なソリューションをここに置きたいと思います。

bootstrapドロップダウンは次のように定義されます。

<div class="btn-group" role="group">
  <button type="button" data-toggle="dropdown" value="1" class="btn btn-default btn-sm dropdown-toggle">
    Option 1 <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#" data-value="1">Option 1</a></li>
    <li><a href="#" data-value="2">Option 2</a></li>
    <li><a href="#" data-value="3">Option 3</a></li>
  </ul>
</div>

標準のbootstrapドロップダウンコードに加えて、すべてのドロップダウンオプション（data-value要素）に値を保存するための<a>属性があります。

これでJSコード。ドロップダウンを処理する関数を作成しました：

function dropdownToggle() {
    // select the main dropdown button element
    var dropdown = $(this).parent().parent().prev();

    // change the CONTENT of the button based on the content of selected option
    dropdown.html($(this).html() + '&nbsp;</i><span class="caret"></span>');

    // change the VALUE of the button based on the data-value property of selected option
    dropdown.val($(this).prop('data-value'));
}

そしてもちろん、イベントリスナーを追加する必要があります。

$(document).ready(function(){
    $('.dropdown-menu a').on('click', dropdownToggle);
}
3
Petr Pánek

これを試して：

<div class="form-group">
     <label class="control-label" for="Company">Company</label>
     <select id="Company" class="form-control" name="Company">
         <option value="small">small</option>
         <option value="medium">medium</option>
         <option value="large">large</option>
     </select> 
 </div>
1
domini ccqque

そのように表示されるドロップダウンリストは、ブラウザの種類によって異なります。一部の人にとっては、スタイルを変更することはできません。あなたのものはIE9のように見えますが、Chromeではまったく違って見えます。

次のようなものを使用することができます。

http://silviomoreto.github.io/bootstrap-select/

これにより、選択ボックスがより一貫したクロスブラウザになります。

1
Paddy
;(function ($) {
    $.fn.bootselect = function (options) {
        this.each(function () {
            var os = jQuery(this).find('option');
            var parent = this.parentElement;
            var css = jQuery(this).attr('class').split('input').join('btn').split('form-control').join('');
            var vHtml = jQuery(this).find('option[value="' + jQuery(this).val() + '"]').html();
            var html = '<div class="btn-group" role="group">' + '<button type="button" data-toggle="dropdown" value="1" class="btn btn-default ' + css + ' dropdown-toggle">' +
                vHtml + '<span class="caret"></span>' + '</button>' + '<ul class="dropdown-menu">';
            var i = 0;
            while (i < os.length) {
                html += '<li><a href="#" data-value="' + jQuery(os[i]).val() + '" html-attr="' + jQuery(os[i]).html() + '">' + jQuery(os[i]).html() + '</a></li>';
                i++;
            }
            html += '</ul>' + '</div>';
            var that = this;
            jQuery(parent).append(html);
            jQuery(parent).find('ul.dropdown-menu > li > a').on('click', function () {
                jQuery(parent).find('button.btn').html(jQuery(this).html() + '<span class="caret"></span>');
                jQuery(that).find('option[value="' + jQuery(this).attr('data-value') + '"]')[0].selected = true;
                jQuery(that).trigger('change');
            });
            jQuery(this).hide();
        });
    };
}(jQuery));


jQuery('.bootstrap-select').bootselect();
0
Amit Talbot