wake-up-neo.net

Bootstrap 3 Dropdown auswählen

Wir versuchen unser Anmeldeformular mit bootstrap neu zu implementieren. Unser Anmeldeformular enthält eine Dropdown-Liste, die einen Firmentyp darstellt. Ich habe ausführlich online gesucht, sehe aber kein Beispiel, bei dem eine Formulareingabe ein Dropdown wäre.

Bootstrap gibt eine Menge Beispiele für Dropdowns, die sich auf verschiedene Aktionen beziehen, aber ich brauche eine Dropdown-Eingabe. Ich habe zwei Lösungen gefunden:

Zuerst:

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

Hier gibt es ein Problem: Obwohl die Box selbst korrekt gestaltet ist, werden im Dropdown-Menü keine Stile angewendet. 

enter image description here

Zweite Version:

<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>

Dieser sieht nett aus:

enter image description here

aber es ist ein knopf. Wenn eine Option ausgewählt ist, möchte ich keine Aktion ausführen. Ich möchte nur den Text ändern und die Auswahl mit einem entsprechenden Eingabefeld binden. 

Beide Ansätze scheinen eine falsche Wahl für meine Handlung zu sein. Ich kann nicht glauben, dass Bootstrap keine einfache Dropdown-Auswahlkomponente enthält, die an ein Eingabefeld gebunden ist.

Was vermisse ich ? Bitte helfen.

27
AstroSharp

Wenn Sie dies erreichen möchten, halten Sie einfach den Dropdown-Button und gestalten Sie ihn wie das Auswahlfeld. Der Code lautet hier und darunter.

.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%;}

Damit die Schaltfläche wie eine Auswahlbox funktioniert, müssen Sie nur diesen kleinen Javascript-Code hinzufügen:

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

Wenn Sie über multiple benutzerdefinierte Dropdowns verfügen, können Sie diesen Javascript-Code verwenden:

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

Wir haben gerade unsere Website auf Bootstrap 3 umgestellt und wir haben eine Reihe von Formularen.

Suchst du danach? Demo hier

<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>
19
Dan

Sie können dem ausgewählten Element auch eine aktive Klasse hinzufügen.

$('.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>');
});

Siehe das jsfiddle-Beispiel

11
Nathalia Xavier

Ich habe schon seit einiger Zeit nach einem Nice-Select-Dropdown gesucht und einen guten gefunden. Also werde ich es einfach hier lassen. Es heißt Bootsrap-Select

hier ist der Link. Hör zu. Es hat bearbeitbare Dropdown-Listen, Kombinations-Dropdown-Listen und mehr. Und es ist eine Brise, die Sie Ihrem Projekt hinzufügen können.

Wenn der Link nicht funktioniert, suchen Sie einfach nach bootstrap-select von silviomoreto.github.io. Dies ist besser, da es sich um ein normales select-Tag handelt 

4
Gokigooooks

Ich möchte die Antwort von paulalexandru erweitern und hier eine vollständige Lösung einfügen, die im Allgemeinen mit Bootstrap-Dropdowns und dem Aktualisieren des Inhalts der Hauptschaltflächen sowie des Werts der ausgewählten Option arbeitet.

Das Bootstrap-Dropdown ist folgendermaßen definiert:

<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> 

Zusätzlich zum Standard-Bootstrap-Dropdown-Code gibt es das data-value-Attribut zum Speichern der Werte in jeder Dropdown-Option (im <a>-Element).

Nun der JS-Code . Ich habe eine Funktion erstellt, die die Dropdowns behandelt:

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'));
}

Und natürlich müssen wir einen Ereignis-Listener hinzufügen:

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

Die Dropdown-Liste, die auf diese Weise angezeigt wird, hängt von Ihrem Browser ab, da es für einige nicht möglich ist, diese Einstellungen zu ändern. Es sieht so aus, als wäre Ihr IE9, würde aber in Chrome ganz anders aussehen.

Sie könnten ungefähr so ​​aussehen:

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

Dadurch werden Ihre Selectboxen konsistenter im Browser.

1
Paddy

Versuche dies: 

<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>
0
domini ccqque
;(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