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

Ja, nur "ausgewählt deaktiviert" in der Option.

<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

Verwenden Sie versteckt:

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

Dropdown oder Auswahl haben keinen Platzhalter, da HTML diesen nicht unterstützt. Es ist jedoch möglich, denselben Effekt zu erstellen, sodass er genauso aussieht wie der Platzhalter für andere 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 sehen möchten, entfernen Sie die Anzeigeeigenschaft aus CSS

Wenn Sie das Auswahlfeld über Javascript initialisieren, kann Folgendes hinzugefügt werden, 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 wie folgt

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

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

<select class="selectpicker" title="Some placeholder text...">
    <option data-hidden="true"></option>
    <option>First</option>
    <option>Second</option>
</select>

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

Versuche dies:

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

Wenn Sie required+ verwenden, value=""kann der Benutzer es nicht mit auswählen. Dadurch hiddenwird es in der Optionsliste ausgeblendet, wenn der Benutzer das Optionsfeld öffnet

Versuchen Sie @title = "stuff". Es hat bei mir funktioniert.

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

noneSelectedText in der Bootstrap-Datei.

Um die Individualität zu ändern, können Sie den Parameter TITLE 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>

1. in bootstrap-select.jsFindentitle: null, und entfernen Sie es.
2. hinzufügen title="YOUR TEXT"in<select> Elemente.
3. Gut :)

Beispiel:

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

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

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

Deaktivieren Sie die erste Option von JQuery.

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

Dadurch wird die erste Dropdown-Option als Platzhalter aktiviert, und der Benutzer kann die erste Option nicht mehr auswählen.

Ich hoffe es hilft!!

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>

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

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

Mit Bootstrap können Sie Folgendes 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>

Bootstrap Select hat eine noneSelectedTextOption. Sie können es über data-none-selected-textAttribut einstellen . Dokumentation .

Für .htmlSeite

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

für .jspoder 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>

Wenn Sie mit Bootstrap der Option, die für Filter oder andere Dinge verwendet werden soll, auch einige Werte hinzufügen müssen, können Sie einfach die Klasse "bs-title-option" zu der Option hinzufügen, 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 titleAttribut hinzu.

Lösung für Angular 2

Erstellen Sie eine Beschriftung ü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 wenden Sie CSS an, um es oben zu platzieren

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

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

eckig html CSS

<option value="" defaultValue disabled> Something </option>

Sie können ersetzen defaultValuemit , selectedaber diese Warnung geben würde.