Como mostrar a opção de seleção de desativar HTML por padrão?

139

Eu sou novo em HTML e PHP e quero obter um menu suspenso da tabela mysql e também codificado. Tenho várias seleções na minha página, uma delas é

<select name="tagging">
    <option value="">Choose Tagging</option>
    <option value="Option A">Option A</option>
    <option value="Option B">Option B</option>
    <option value="Option C">Option C</option>
</select>

O problema agora é que o usuário também pode selecionar "Escolher marcação" como sua marcação, mas eu só quero que ele escolha entre as três disponíveis. Eu usei desativar como

<select name="tagging">
    <option value="" disabled="disabled">Choose Tagging</option>
    <option value="Option A">Option A</option>
    <option value="Option B">Option B</option>
    <option value="Option C">Option C</option>
</select>

Mas agora a "Opção A" se tornou a padrão. Então, eu quero definir "Choose Tagging" como padrão e também quero desativá-lo da seleção. É uma maneira de fazer isso. A mesma coisa precisa ser feita com outro select que buscará dados do Mysql. Qualquer sugestão será apreciável.

Ankit Sharma
fonte
que tal adicionar um evento de clique no select para desativar a primeira opção.
David Blacksmith
Você precisa corrigir o erro de sintaxe - value = "" disabled deve ser desativado = "disabled" + remover as tags de fechamento ímpares </select>
Evgeniy
@Evgeniy oops que </select> pertence a outra parte do meu código #
Ankit Sharma
@AnkitSharma eu editei o seu código - você tinha </select><select> <opção> ... <opção> </select>
Evgeniy
@Evgeniy thanx ..... </select> foi copiado do meu código por engano.
Ankit Sharma

Respostas:

291

usar

<option selected="true" disabled="disabled">Choose Tagging</option>    
Cris
fonte
42
Você não precisa colocar os trueou disabledvalores. você pode começar fazendo<option selected disabled>Choose Tagging</option>
Sam Eaton
18
@ SamEaton, apenas cria o código para seguir a sintaxe XHTML válida; caso contrário, no HTML5, você pode negligenciá-lo.
Cris
1
Você deve definir o valor = "", portanto, se você também solicitou, será gerado um erro para escolher no menu suspenso, caso contrário, um valor vazio será passado mesmo que nada tenha sido selecionado. <option selected="true" disabled="disabled" value="">Choose Tagging</option>
user34612 3/01
27

Em HTML5, para selecionar uma opção desabilitada:

<option selected disabled>Choose Tagging</option>
Pradeep Kumar Prabaharan
fonte
10

Eu sei que você pergunta como desativar a opção, mas acho que o resultado visual do usuário final é o mesmo com esta solução, embora seja provavelmente um pouco menos exigente em termos de recursos.

Use a tag optgroup , da seguinte maneira:

<select name="tagging">
    <optgroup label="Choose Tagging">
        <option value="Option A">Option A</option>
        <option value="Option B">Option B</option>
        <option value="Option C">Option C</option>
    </optgroup>
</select>
Mandrágora
fonte
3
Isso não funciona, o OP precisa ser selecionado por padrão jsfiddle.net/tomsihap/5xm7grnb
tomsihap:
10

Electron + React Deixe suas duas primeiras opções serem assim

<option hidden="true>Choose Tagging</option>
<option disabled="disabled" default="true">Choose Tagging</option>

Primeiro a exibir quando fechado Segundo a exibir primeiro quando a lista é aberta

Benjamin
fonte
8

Use hidden.

<select>
   <option hidden>Choose</option>
   <option>Item 1</option>
   <option>Item 2</option>
</select>

Isso não o desativa, mas você pode ocultá-lo nas opções enquanto é exibido por padrão.

Thielicious
fonte
6

Outra solução de tag SELECT para quem deseja manter a primeira opção em branco.

<label>Unreal :</label>
<select name="unreal">
   <option style="display:none"></option>
   <option>Money</option>
   <option>Country</option>
   <option>God</option>
</select>

c0degeas
fonte
3
 selected disabled="true"

Usa isto. Funcionará em novos navegadores

Ronak Bokaria
fonte
3

podemos desativar usando essa técnica.

<select class="form-control" name="option_select">
  <option selected="true" disabled="disabled">Select option </option>
  <option value="Option A">Option A</option>
  <option value="Option B">Option B</option>
  <option value="Option C">Option C</option>
</select>
Siddharth Shukla
fonte
1

Se você estiver usando o jQuery para preencher seu elemento de seleção, poderá usar o seguinte:

html

<select id="tagging"></select>

js

array_of_options = ['Choose Tagging', 'Option A', 'Option B', 'Option C']

$.each(array_of_options, function(i, item) {
    if(i==0) { sel_op = 'selected'; dis_op = 'disabled'; } else { sel_op = ''; dis_op = ''; }
    $('<option ' + sel_op + ' ' + dis_op + '/>').val(item).html(item).appendTo('#tagging');
  })

Isso permitirá que o usuário veja a primeira opção como um cabeçalho desativado ('Choose Tagging') e selecione todas as outras opções.

insira a descrição da imagem aqui

Cybernetic
fonte
0
            <select name="dept" id="dept">
                <option value =''disabled selected>Select Department</option>
                <option value="Computer">Computer</option>
                <option value="electronics">Electronics</option>
                <option value="aidt">AIDT</option>
                <option value="civil">Civil</option>
            </select>

use "SELECIONADO" qual opção você deseja selecionar por padrão. obrigado

Abdullah Mahi
fonte
Esta orientação já foi publicada nesta pergunta aqui: stackoverflow.com/a/42997841/2943403 Sua resposta não agrega novo valor à página e apenas contribui para o inchaço da página.
mickmackusa
-1

Você pode definir qual opção está selecionada por padrão assim:

<option value="" selected>Choose Tagging</option>

Eu sugeriria o uso de javascript e JQuery para observar o evento click e desativar a primeira opção após a seleção da outra: Primeiro, forneça um ID ao elemento da seguinte maneira:

<select id="option_select" name="tagging">

e a opção um id:

<option value="" id="initial">Choose Tagging</option>

então:

<script type="text/javascript">

$('option_select').observe(click, handleClickFunction);

Então você acabou de criar a função:

function handleClickFunction () {

if ($('option_select').value !== "option_select") 
{
   $('initial').disabled=true; }
}

S_UMan
fonte