Come mostrare l'opzione disabilita la selezione HTML in per impostazione predefinita?


139

Sono nuovo di HTML e PHP e voglio ottenere un menu a discesa dalla tabella mysql e anche hard-coded. Ho più selezioni nella mia pagina, uno di questi è

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

Il problema ora è che l'utente può anche selezionare "Scegli tag" come tag ma voglio solo fornirgli di scegliere tra tre disponibili. Ho usato disabilita come

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

Ma ora "Opzione A" è diventata quella predefinita. Quindi voglio impostare "Scegli tag" come impostazione predefinita e desidero anche disabilitarlo dalla selezione. È un modo per farlo. La stessa cosa deve essere fatta con un'altra selezione che recupererà i dati da Mysql. Qualsiasi suggerimento sarà apprezzabile.


che ne dici di aggiungere un evento click sulla selezione per disabilitare la prima opzione.
David Blacksmith,

Devi correggere l'errore di sintassi - value = "" disabled dovrebbe essere disabilitato = "disabled" + rimuovi tag di chiusura dispari </select>
Evgeniy,

@Evgeniy oops che </select> appartiene a un'altra parte del mio codice
Ankit Sharma,

@AnkitSharma sono stato modificato il tuo codice: avevi </select><select> <option> ... <option> </select>
Evgeniy,

@Evgeniy thanx ..... </select> è stato copiato dal mio codice per errore.
Ankit Sharma,

Risposte:


291

uso

<option selected="true" disabled="disabled">Choose Tagging</option>    

42
Non è necessario inserire i valori trueo disabled. puoi farlo facendo<option selected disabled>Choose Tagging</option>
Sam Eaton,

18
@ SamEaton, fa semplicemente il codice per seguire la sintassi XHTML valida, altrimenti in HTML5 puoi trascurarlo.
Cris,

1
Dovresti impostare il valore = "", quindi se hai richiesto anche un errore verrà sollevato per scegliere dal menu a discesa, altrimenti verrà passato un valore vuoto anche se non è stato selezionato nulla. <option selected="true" disabled="disabled" value="">Choose Tagging</option>
user34612


10

So che chiedi come disabilitare l'opzione, ma immagino che il risultato visivo degli utenti finali sia lo stesso con questa soluzione, anche se probabilmente è leggermente meno impegnativo in termini di risorse.

Usa il tag optgroup , in questo modo:

<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
Questo non funziona, OP ha bisogno che sia selezionato per impostazione predefinita jsfiddle.net/tomsihap/5xm7grnb
tomsihap

10

Electron + React Lascia che le tue prime due opzioni siano così

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

Primo da visualizzare quando chiuso Secondo da visualizzare per primo quando si apre l'elenco


8

Usa hidden.

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

Questo non lo disattiva, ma è comunque possibile nasconderlo nelle opzioni mentre è visualizzato per impostazione predefinita.


6

Un'altra soluzione di tag SELECT per coloro che vogliono mantenere vuota la prima opzione.

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



3

possiamo disabilitare usando questa tecnica.

<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 stai usando jQuery per riempire il tuo elemento select, puoi usare questo:

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

Ciò consentirà all'utente di visualizzare la prima opzione come intestazione disabilitata ("Scegli tag") e selezionare tutte le altre opzioni.

inserisci qui la descrizione dell'immagine


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>

utilizzare "SELEZIONATO" quale opzione si desidera selezionare per impostazione predefinita. Grazie


Questa guida è già stata pubblicata su questa domanda qui: stackoverflow.com/a/42997841/2943403 La tua risposta non aggiunge alcun valore alla pagina e contribuisce solo a gonfiare la pagina.
Mickmackusa

-1

È possibile impostare quale opzione è selezionata per impostazione predefinita in questo modo:

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

Suggerirei di usare javascript e JQuery per osservare l'evento click e disabilitare la prima opzione dopo che è stata selezionata un'altra: in primo luogo, assegnare all'elemento un ID in questo modo:

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

e l'opzione un id:

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

poi:

<script type="text/javascript">

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

Quindi basta creare la funzione:

function handleClickFunction () {

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

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.