Estou tentando fazer uma lista suspensa que contém um espaço reservado. Não parece ser compatível placeholder="stuff"com as outras formas. Existe uma maneira diferente de obter um espaço reservado na minha lista suspensa?

Sim, apenas "selecionado desativado" na opção.

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

Link para violino

Você também pode ver a resposta em

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

Use oculto:

<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 ou select não tem um placeholder porque HTML não o suporta, mas é possível criar o mesmo efeito para que tenha a mesma aparência de outras entradas placeholder

    $('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>

se você quiser ver a primeira opção na lista, remova a propriedade de exibição do css

Se você estiver inicializando o campo de seleção por meio de javascript, o seguinte pode ser adicionado para substituir o texto do espaço reservado padrão

noneSelectedText: 'Insert Placeholder text'

exemplo: se você tiver:

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

em seu javascript, você inicializa o seletor assim

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

A maioria das opções é problemática para seleção múltipla. Coloque o atributo Title e faça a primeira opção como data-hidden = "true"

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

Adicionar atributo oculto:

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

Experimente isto:

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

ao usar required+ value="", o usuário não pode selecioná-lo usando o hiddendeixará oculto da lista de opções, quando o usuário abrir a caixa de opções

Experimente @title = "coisas". Funcionou para mim

Todas essas opções são .... improvisações. O Bootstrap já oferece uma solução para isso. Se você quiser alterar o espaço reservado para todos os seus elementos suspensos, você pode alterar o valor de

noneSelectedText no arquivo de inicialização.

Para alterar individualmente, você pode usar o parâmetro TITLE.

exemplo:

<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. em bootstrap-select.jsLocalizar title: null, e remover.
2. adicionar title="YOUR TEXT"no <select>elemento.
3. Bem :)

Exemplo:

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

Eu acho que a caixa suspensa com uma classe e código JQuery para desativar a primeira opção para o usuário selecionar, funcionará perfeitamente como espaço reservado para caixa de seleção .

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

Torne a primeira opção desabilitada pelo JQuery.

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

Isso tornará a primeira opção do menu suspenso como espaço reservado e o usuário não poderá mais selecionar a primeira opção.

Espero que ajude!!

Aqui está outra maneira de fazer isso

<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" torna-se o espaço reservado e a propriedade 'required' garante que o usuário deve selecionar uma das opções.

Muito útil, quando você não deseja usar nomes de campos ou rótulos.

Usando o Bootstrap, isso é o que você pode fazer. Usando a classe "text-hide", a opção desabilitada será mostrada primeiro, mas não na lista.

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

A seleção de bootstrap tem uma noneSelectedTextopção. Você pode configurá-lo via data-none-selected-textatributo. Documentação .

Para a .htmlpágina

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

para .jspou qualquer outra página de servlet.

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

Usando bootstrap, se você também precisar adicionar alguns valores à opção de usar para filtros ou outras coisas, você pode simplesmente adicionar a classe "bs-title-option" à opção que deseja como espaço reservado:

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

O bootstrap adiciona essa classe ao titleatributo.

Solução para Angular 2

Crie um rótulo em cima do seleto

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

e aplicar CSS para colocá-lo no topo

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

pointer-events: none permite que você exiba a seleção ao clicar no rótulo, que fica oculto quando você seleciona uma opção.

angular html css

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

você pode substituir defaultValuepor, selectedmas isso daria um aviso.