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.


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>    

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


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>

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


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.


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>



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>

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


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


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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.