Wie wird die Option zum Deaktivieren der HTML-Auswahl standardmäßig angezeigt?

139

Ich bin neu in HTML und PHP und möchte ein Dropdown-Menü aus der MySQL-Tabelle erhalten und auch fest codiert. Ich habe mehrere Auswahlmöglichkeiten auf meiner Seite. Eine davon ist

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

Das Problem ist jetzt, dass der Benutzer auch "Tagging auswählen" als sein Tagging auswählen kann, aber ich möchte ihm nur die Auswahl aus den verfügbaren drei zur Verfügung stellen. Ich habe deaktiviert als

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

Aber jetzt wurde "Option A" die Standardeinstellung. Daher möchte ich standardmäßig "Tagging auswählen" festlegen und die Auswahl deaktivieren. Ist es ein Weg, dies zu tun. Dasselbe muss mit einer anderen Auswahl gemacht werden, die Daten von MySQL abruft. Jeder Vorschlag wird dankbar sein.

Ankit Sharma
quelle
Wie wäre es, wenn Sie der Auswahl ein Klickereignis hinzufügen, um die erste Option zu deaktivieren.
David Blacksmith
Sie müssen den Syntaxfehler beheben - value = "" disabled sollte deaktiviert sein = "disabled" + ungerade schließende </ select> -Tags entfernen
Evgeniy
@ Evgeniy oops, dass </ select> zu einem anderen Teil meines Codes gehört
Ankit Sharma
@AnkitSharma Ich habe Ihren Code bearbeitet - Sie hatten </ select> <select> <option> ... <option> </ select>
Evgeniy
@Evgeniy thanx ..... </ select> wurde versehentlich aus meinem Code kopiert.
Ankit Sharma

Antworten:

290

verwenden

<option selected="true" disabled="disabled">Choose Tagging</option>    
Krise
quelle
42
Sie müssen die Werte trueoder nicht disabledeingeben. Sie können durch tun<option selected disabled>Choose Tagging</option>
Sam Eaton
18
@ SamEaton, der Code folgt lediglich der gültigen XHTML-Syntax, andernfalls können Sie ihn in HTML5 vernachlässigen.
Cris
1
Sie sollten den Wert = "" setzen. Wenn Sie dies ebenfalls erforderlich gemacht haben, wird ein Fehler bei der Auswahl aus der Dropdown-Liste ausgelöst. Andernfalls wird ein leerer Wert übergeben, obwohl nichts ausgewählt wurde. <option selected="true" disabled="disabled" value="">Choose Tagging</option>
user34612
27

So HTML5wählen Sie eine deaktivierte Option aus:

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

Ich weiß, dass Sie fragen, wie die Option deaktiviert werden soll, aber ich denke, dass das visuelle Ergebnis des Endbenutzers bei dieser Lösung das gleiche ist, obwohl es wahrscheinlich geringfügig weniger Ressourcen erfordert.

Verwenden Sie das optgroup- Tag wie folgt :

<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>
Mandrake
quelle
3
Dies funktioniert nicht, OP muss standardmäßig ausgewählt sein jsfiddle.net/tomsihap/5xm7grnb
tomsihap
10

Electron + React Lassen Sie Ihre beiden ersten Optionen so sein

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

Zuerst angezeigt, wenn geschlossen, zweitens, um zuerst angezeigt zu werden, wenn die Liste geöffnet wird

Benjamin
quelle
8

Verwenden Sie hidden.

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

Dadurch wird es nicht deaktiviert, Sie können es jedoch in den Optionen ausblenden, während es standardmäßig angezeigt wird.

Thielicious
quelle
6

Eine weitere SELECT-Tag-Lösung für diejenigen, die die erste Option leer lassen möchten.

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

c0degeas
quelle
3
 selected disabled="true"

Benutze das. Es wird in neuen Browsern funktionieren

Ronak Bokaria
quelle
3

Wir können mit dieser Technik deaktivieren.

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

Wenn Sie jQuery verwenden, um Ihr ausgewähltes Element zu füllen, können Sie Folgendes verwenden:

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

Auf diese Weise kann der Benutzer die erste Option als deaktivierte Überschrift ("Tagging auswählen") anzeigen und alle anderen Optionen auswählen.

Geben Sie hier die Bildbeschreibung ein

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

Verwenden Sie "AUSGEWÄHLT", welche Option Sie standardmäßig auswählen möchten. Vielen Dank

Abdullah Mahi
quelle
Diese Anleitung wurde bereits zu dieser Frage hier veröffentlicht: stackoverflow.com/a/42997841/2943403 Ihre Antwort fügt der Seite keinen neuen Wert hinzu und trägt nur zum Aufblähen der Seite bei.
Mickmackusa
-1

Sie können festlegen, welche Option standardmäßig wie folgt ausgewählt ist:

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

Ich würde vorschlagen, Javascript und JQuery zu verwenden, um das Klickereignis zu beobachten und die erste Option zu deaktivieren, nachdem eine andere ausgewählt wurde: Geben Sie dem Element zunächst eine ID wie folgt:

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

und die Option eine ID:

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

dann:

<script type="text/javascript">

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

Dann erstellen Sie einfach die Funktion:

function handleClickFunction () {

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

S_UMan
quelle