select a dizer selecione uma opçao

doxy · October 12, 2012 at 12:03 AM

Boa noite amigo,

Como faço em css ou javascript, dependendo do que vocês disserem, para ter por exemplo uma combobox a dizer por exemplo:

Lisboa

Porto

Mas que tenha escrito "Seleccione uma opção" dentro do select, mas que não faça parte da lista da combobox....

obrigado

Th3Alchemist · October 12, 2012 at 05:24 PM

nem CSS nem JS... puro HTML:

<select>
 <option selected disabled>Selecione uma opção</option>
 <option value="1">Opção 1</option>
 <option value="2">Opção 2</option>
 <option value="3">Opção 3</option>
</select>

doxy · October 15, 2012 at 01:16 AM

Desde já o meu obrigado pela resposta Amigo...

Mas se eu fizer o tal <option selected="disable">Selecione uma opção</option>

A opção dá para escolher na lista e eu não queria...

Percebes?

obrigado

Th3Alchemist · October 16, 2012 at 09:14 AM

Isso é a mesma situação como deixar uma input text vazia...

Para isso terás que criar uma função JS que verifica se os campos estão preenchidas

(Poderás também utilizar o argumento required mas isso seria HTML5 e só estará pronta a partir de 2014)

doxy · October 21, 2012 at 02:26 AM

Sim eu fiz a função para obrigar a preencher amigo..

E que se disser selecionar opção pede para meter um valor..

Exemplo, imaginemos que a minha combobox tem os seguintes items:

[selecione uma opçao]

Lisboa

Coimbra

Porto

Faro

Bom eu obrigo a que alguém escolha Lisboa,Coimbra, Porto ou Faro.

Se escolher a opçao [selecione uma opcao] ele pede para meter uma opcao valida.

Mas eu nao queria que ao clicar na combobox, a opçao seleccione uma opcao desse para seleccionar..

Imaginem, a combobox diz, [seleccionar opcao]. Mas quando carregasse para ver as opcões so queria que mostrasse:

Lisboa

Coimbra

Porto

Faro

HappyHippyHippo · October 21, 2012 at 10:39 AM

olha que isto é uma maneira muito manhosa de resolver o teu problema:

<!DOCTYPE html>
<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
   <script type="text/javascript">
     $(document).ready(function() {
       $('#combobox').click(function() {
         $('#combobox option[value=""]').remove();
       });
     });
   </script>
 </head>
 <body>
   <select id="combobox" style="width: 100px;">
     <option value="" selected="selected">delete me</option>
     <option value="2">valor 2</option>
     <option value="3">valor 3</option>
     <option value="4">valor 4</option>
   </select>
 </body>
</html>

Edited October 21, 2012 at 10:40 AM by HappyHippyHippo

yoda · October 22, 2012 at 08:38 PM

Se existe uma opção que nunca vai ser usá-da, porque raio está lá? Porque não criar uma label ou algo similar onde se insira o "Escolha uma opção"?

mjamado · October 22, 2012 at 09:00 PM

Não sei até que ponto funcionará bem em todos os browsers, mas é testar:

<select>
   <option value="0" selected="selected" disabled="disabled" style="display: none">Escolha uma opção</option>
   <option value="1">Opção 1</option>
   <option value="2">Opção 2</option>
   <option value="3">Opção 3</option>
</select>

yoda · October 23, 2012 at 03:51 PM

Para testarem o código acima no vosso browser : http://jsfiddle.net/P4FTK/

mjamado · October 23, 2012 at 04:05 PM

Para testarem o código acima no vosso browser : http://jsfiddle.net/P4FTK/

Obrigado, yoda, esqueço-me sempre que essa pequena maravilha existe. Did it work?

yoda · October 24, 2012 at 10:49 AM

A mim funcionou no Chrome, IE, Firefox e Opera (últimas versões estáveis disponíveis a esta data). No Opera e IE a opção não fica invisível após a primeira selecção como nos outros, mas mantém-se inactiva, pelo que acaba por funcionar como pretendido.

Testei como HTML5. Se quiserem outros DTD's, no separador Info (menu esquerdo) existem uma opção para mudar isso.

Edited October 24, 2012 at 10:51 AM by yoda

Th3Alchemist · October 24, 2012 at 11:31 AM

Desde já o meu obrigado pela resposta Amigo...

Mas se eu fizer o tal <option selected="disable">Selecione uma opção</option>

A opção dá para escolher na lista e eu não queria...

Percebes?

obrigado

Não é

<option selected="disable">Selecione uma opção</option>

Mas sim

<option selected disabled>Selecione uma opção</option>

ou

<option selected="selected" disabled="disabled">Selecione uma opção</option>

Edit: E não leva nenhum valule="..."

Edited October 24, 2012 at 11:32 AM by Th3Alchemist

taviroquai · October 24, 2012 at 12:08 PM

Não sei até que ponto funcionará bem em todos os browsers, mas é testar:

<select>
<option value="0" selected="selected" disabled="disabled" style="display: none">Escolha uma opção</option>
<option value="1">Opção 1</option>
<option value="2">Opção 2</option>
<option value="3">Opção 3</option>
</select>

Boa solução... mas assim o utilizador não pode "voltar a trás" se se arrepender de ter selecionado... mas se for uma opção necessária está bom.

Gosto mais da solução do Alchemist... mais standard sem efeitos e coisas escondidas ao utilizador... mas isso sou eu...

mjamado · October 24, 2012 at 12:26 PM

Gosto mais da solução do Alchemist... mais standard sem efeitos e coisas escondidas ao utilizador... mas isso sou eu...

Eu também, mas como o OP não queria mostrar isso na lista, não estou a ver outra maneira de o fazer sem usar JS...

doxy · October 25, 2012 at 05:38 PM

realmente apresentaram boas soluções..

Se calhar para alguns a minha questão foi estúpida.. Mas penso que tem algum sentido...

Vou experimentar a melhor solução.. desde já o meu obrigado a todos.

Não é

<option selected="disable">Selecione uma opção</option>

Mas sim

<option selected disabled>Selecione uma opção</option>

ou

<option selected="selected" disabled="disabled">Selecione uma opção</option>

Edit: E não leva nenhum valule="..."

Amigo usei o value, porque as minhas validações estavam a usar o value..

se fosse 1 mandava email para coimbra, se fosse 2 mandava para algarve por exemplo... mas sim realmente tens razão nesta opção não era preciso..

ONTheBankz · February 22, 2022 at 04:11 PM

Em 25/10/2012 às 18:38, doxy disse:

realmente apresentaram boas soluções..

Se calhar para alguns a minha questão foi estúpida.. Mas penso que tem algum sentido...

Vou experimentar a melhor solução.. desde já o meu obrigado a todos.

Amigo usei o value, porque as minhas validações estavam a usar o value..

se fosse 1 mandava email para coimbra, se fosse 2 mandava para algarve por exemplo... mas sim realmente tens razão nesta opção não era preciso..

Mete isto zezoca

<option value="" style="display:none;">Selecione uma opção</option>

Edited February 22, 2022 at 04:12 PM by ONTheBankz

select a dizer selecione uma opçao

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Important Information