ti-enxame.com

Um espaço reservado para a tag `select`?

Eu estou querendo saber como obter o efeito placeholder com a tag select, seria realmente bom ter a opção selecionada padrão, algo como "Por favor, escolha uma opção:".

Eu tentei algumas variações e elas não estão funcionando até agora e tenho certeza de que isso pode ser alcançado porque eu vi em algum lugar (não me lembro onde).

Eu tentei isso:

1)

<fieldset>
            <select data-placeholder="Please select a product" id="s1" class="global">
                <option value="Some">Some</option>
                <option value="Slower">Slower</option>
                <option value="Slow">Slow</option>
                <option value="Fast">Fast</option>
                <option value="Faster">Faster</option>
            </select>
</fieldset>

2)

<fieldset>
            <select id="s1" class="global">
                <option data-placeholder="true"  value="Some">Some</option>
                <option value="Slower">Slower</option>
                <option value="Slow">Slow</option>
                <option value="Fast">Fast</option>
                <option value="Faster">Faster</option>
            </select>
</fieldset>

Ambos não estão funcionando, talvez haja um método jQuery para fazer isso?

Edição rápida: Eu não quero desabilitar apenas uma das opções e torná-la selected porque ela ainda será exibida na lista suspensa com os outros itens.

22
Ricardo

Aqui estão dois tipos de espaço reservado, re-selecionáveis ​​e ocultos:

Demonstração: http://jsfiddle.net/lachlan/FuNmc/

Espaço reservado re-selecionável:

<select>
    <option value="" selected>Please select</option>
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
</select>

Espaço reservado oculto:

<select class="empty">
    <option value="" selected disabled>Please select</option>
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
</select>

CSS para alterar a cor do primeiro item:

select option { color: black; }
select option:first-child { color: grey; }
select.empty { color: grey; }
/* Hidden placeholder */
select option[disabled]:first-child { display: none; }

E um pouco de jQuery para alternar a cor da fonte após a seleção:

// Applies to all select boxes that have no value for their first option
$("select:has(option[value=]:first-child)").on('change', function() {
    $(this).toggleClass("empty", $.inArray($(this).val(), ['', null]) >= 0);
}).trigger('change');

Inspiração:
https://stackoverflow.com/a/5805194/1196148 - espaço reservado re-selecionável
https://stackoverflow.com/a/8442831/1196148 - espaço reservado oculto

26
Lachlan Arthur

Criei uma demonstração simples seguindo a sugestão @Truth: http://jsfiddle.net/6QnXF/

(function($){
    $('#myAwesomeSelect').change(function(){
       if( !$(this).data('removedPlaceHolder'))
       {
          $(this).find('option:first').remove();
          $(this).data('removedPlaceHolder', true); 
       }
    });
})(jQuery);

Espero que funcione para você.

4
Luciano Mammino

Até onde eu sei, não há como fazê-lo apenas com HTML (embora isso seja legal.) Você pode falsificá-lo com uma opção selecionada (sei que você não o quer, mas provavelmente é o único). Depois que outra opção é selecionada, você pode removê-lo.

Aqui está um exemplo prático do que eu descrevo.

2
Madara Uchiha

Meu palpite é que você precisará criar sua própria solução alternativa para uma caixa de seleção. Algo como uma série de divs que atuam como opções que, quando clicadas, são mostradas e têm seu valor inserido em um campo de entrada oculto.

0
Dormouse