it-swarm.com.de

Platzhalter für die Dropdown-Liste der Bootstrap-Auswahl

Ich versuche, eine Dropdown-Liste zu erstellen, die einen Platzhalter enthält. Es scheint placeholder="stuff" nicht wie andere Formulare zu unterstützen. Gibt es eine andere Möglichkeit, einen Platzhalter in meiner Dropdownliste zu erhalten?

77
Jordan.J.D

Ja, in der Option "nur deaktiviert".

<select>
    <option value="" selected disabled>Please select</option>
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

Link zur Geige

Sie können die Antwort auch unter anzeigen

https://stackoverflow.com/a/5859221/1225125

171
Brakke

Verborgenes verwenden:

<select>
    <option hidden >Display but don't show in list</option>
    <option> text 1 </option>
    <option> text 2 </option>
    <option> text 3 </option>
</select>
42
Jay Lin

dropdown oder select hat keinen Platzhalter, da HTML ihn nicht unterstützt, aber es ist möglich, denselben Effekt zu erzeugen, so dass er genauso aussieht wie andere Platzhalter für Eingaben

    $('select').change(function() {
     if ($(this).children('option:first-child').is(':selected')) {
       $(this).addClass('placeholder');
     } else {
      $(this).removeClass('placeholder');
     }
    });
.placeholder{color: grey;}
select option:first-child{color: grey; display: none;}
select option{color: #555;} // bootstrap default color
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control placeholder">
   <option value="">Your Placeholder Text</option>
   <option value="1">Text 1</option>
   <option value="2">Text 2</option>
   <option value="3">Text 3</option>
</select>

wenn Sie die erste Option in der Liste anzeigen möchten, entfernen Sie die Anzeigeeigenschaft von css

15
NeoNe

Wenn Sie das Auswahlfeld über Javascript initialisieren, können Sie Folgendes hinzufügen, um den Standard-Platzhaltertext zu ersetzen

noneSelectedText: 'Insert Placeholder text'

beispiel: Wenn Sie haben:

<select class='picker'></select>

in Ihrem Javascript initialisieren Sie den selectpicker so

$('.picker').selectpicker({noneSelectedText: 'Insert Placeholder text'});  
4
Chadillac

Verborgenes Attribut hinzufügen:

<select>
    <option value="" selected disabled hidden>Please select</option>
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>
3
Mark van Lit

Versuche dies:

<select class="form-control" required>
<option value="" selected hidden>Select...</option>

wenn Sie required + value="" verwenden, kann der Benutzer ihn nicht auswählen. Mit hidden wird er aus der Optionsliste ausgeblendet, wenn der Benutzer das Optionsfeld öffnet

3
Bassem Shahin

Alle diese Optionen sind .... Improvisationen . Bootstrap bietet bereits eine Lösung dafür . Wenn Sie den Platzhalter für alle Dropdown-Elemente ändern möchten, können Sie den Wert von ändern 

noneSelectedText in der Bootstrap-Datei.

Um einzelne zu ändern, können Sie den TITLE-Parameter verwenden.

beispiel:

<div class="form-group">
          <label class="control-label col-xs-2" id="country">Continent:</label>
          <div class="col-xs-9">
            <select name="zones[]" class="selectpicker" title="All continents" id="zones" multiple >
              <option value="Africa">Africa</option>
              <option value="Asia">Asia</option>
              <option value="North America">America North</option>
              <option value="South America">America South</option>
              <option value="Antarctica">Antarctica</option>
              <option value="Australia">Australia</option>
              <option value="Europe">Europe</option>
            </select>
          </div>
        </div>
2
Tudor

Die meisten Optionen sind problematisch für die Mehrfachauswahl. Platzieren Sie das Titelattribut und machen Sie die erste Option als data-hidden = "true".

<select class="selectpicker" title="Some placeholder text...">
    <option data-hidden="true"></option>
    <option>First</option>
    <option>Second</option>
</select>
2
VGranin
  1. in bootstrap-select.js Finde title: null, und entferne ihn.
  2. fügen Sie title="YOUR TEXT" in <select>-Element hinzu.
  3. Gut :)

Beispiel: 

<select title="Please Choose one item">
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

Versuchen Sie @title = "stuff". Es hat für mich funktioniert.

1
Gabriel Janson

Wenn Sie Bootstrap verwenden, müssen Sie der Option, die für Filter oder anderes verwendet werden soll, auch einige Werte hinzufügen. Fügen Sie einfach die Klasse "bs-title-option" der Option hinzu, die Sie als Platzhalter verwenden möchten:

<select class="form-group">
   <option class="bs-title-option" value="myVal">My PlaceHolder</option>
   <option>A</option>
   <option>B</option>
   <option>c</option>
</select>

Bootstrap fügt diese Klasse dem title-Attribut hinzu.

0

Lösung für Angular 2

Erstellen Sie ein Etikett über der Auswahl

<label class="hidden-label" for="IsActive"
    *ngIf="filterIsActive == undefined">Placeholder text</label>
<select class="form-control form-control-sm" type="text" name="filterIsActive"
    [(ngModel)]="filterIsActive" id="IsActive">
    <option value="true">true</option>
    <option value="false">false</option>
</select>

und wende CSS an, um es oben zu platzieren

.hidden-label {
    position: absolute;
    margin-top: .34rem;
    margin-left: .56rem;
    font-style: italic;
    pointer-events: none;
}

Mit pointer-events: none können Sie die Auswahl anzeigen, wenn Sie auf die Beschriftung klicken. Diese wird ausgeblendet, wenn Sie eine Option auswählen.

 eckightmlcss

0
edu

Für .html Seite

<select>
    <option value="" selected disabled>Please select</option>
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

für .jsp oder eine andere Servlet-Seite.

<select>
    <option value="" selected="true" disabled="true">Please select</option>
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>
0
tk_

Ich denke, das Dropdown-Feld mit einer Klasse und einem JQuery-Code zum Deaktivieren der ersten Option, die der Benutzer auswählen kann, funktioniert perfekt als Auswahlfeld-Platzhalter .

<select class="selectboxclass">
   <option value="">- Please Select -</option>
   <option value="IN">India</option>
   <option value="US">America</option>
</select>

Machen Sie die erste Option von JQuery deaktiviert. 

<script>
$('select.selectboxclass option:first').attr('disabled', true);
</script>

Dies macht die erste Option von Dropdown als Platzhalter und der Benutzer kann die erste Option nicht mehr auswählen.

Ich hoffe es hilft!!

0
Mahesh Yadav

Mit Bootstrap können Sie dies tun. Bei Verwendung der Klasse "Text-Hide" wird die deaktivierte Option zuerst angezeigt, jedoch nicht in der Liste.

<select class="form-control" >
  <option selected disabled class="text-hide">Title</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
0
Srijay

Bootstrap select hat eine noneSelectedText-Option. Sie können es über data-none-selected-text Attribut . Dokumentation einstellen.

0
Oleg

Hier ist eine andere Möglichkeit, dies zu tun

<select name="GROUPINGS[xxxxxx]" style="width: 60%;" required>
    <option value="">Choose Platform</option>
<option value="iOS">iOS</option>
    <option value="Android">Android</option>
    <option value="Windows">Windows</option>
</select>

"Choose Platform" wird zum Platzhalter und die Eigenschaft "required" stellt sicher, dass der Benutzer eine der Optionen auswählen muss.

Sehr nützlich, wenn Sie keine Feldnamen oder Labels verwenden möchten.

0
Sandeep