Jak domyślnie wyłączyć opcję wyboru HTML?

139

Jestem nowy w HTML i PHP i chcę uzyskać rozwijane menu z tabeli mysql, a także zakodowane na stałe. Mam wiele opcji wyboru na mojej stronie, jednym z nich jest

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

Problem polega teraz na tym, że użytkownik może również wybrać opcję „Wybierz tagowanie” jako tagowanie, ale chcę mu tylko umożliwić wybór spośród trzech dostępnych. Użyłem wyłącz jako

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

Ale teraz „Opcja A” stała się opcją domyślną. Chcę więc ustawić opcję „Wybierz tagowanie” jako domyślną, a także wyłączyć ją z zaznaczania. Czy to sposób na zrobienie tego. To samo należy zrobić z innym wyborem, który pobierze dane z MySQL. Każda sugestia będzie odczuwalna.

Ankit Sharma
źródło
co powiesz na dodanie zdarzenia kliknięcia do zaznaczenia, aby wyłączyć pierwszą opcję.
David Blacksmith
Musisz naprawić błąd składni - wartość = "" wyłączone powinno być wyłączone = "wyłączone" + usuń tagi zamykające nieparzyste </select>
Evgeniy,
@Evgeniy oops, że </select> należy do innej części mojego kodu
Ankit Sharma
@AnkitSharma Edytowałem twój kod - miałeś </select><select> <option> ... <option> </select>
Evgeniy
@Evgeniy thanx ..... </select> został przez pomyłkę skopiowany z mojego kodu.
Ankit Sharma

Odpowiedzi:

290

posługiwać się

<option selected="true" disabled="disabled">Choose Tagging</option>    
Kryzys
źródło
42
Nie musisz umieszczać wartości truelub disabled. możesz to zrobić<option selected disabled>Choose Tagging</option>
Sam Eaton
18
@ SamEaton, po prostu tworzy kod zgodnie z poprawną składnią XHTML, w przeciwnym razie w HTML5 możesz go zaniedbać.
Cris
1
Powinieneś ustawić wartość = "", więc jeśli również wymagałeś, zostanie zgłoszony błąd do wyboru z listy rozwijanej, w przeciwnym razie zostanie przekazana pusta wartość, mimo że nic nie zostało wybrane. <option selected="true" disabled="disabled" value="">Choose Tagging</option>
user34612
27

W HTML5, aby wybrać wyłączoną opcję:

<option selected disabled>Choose Tagging</option>
Pradeep Kumar Prabaharan
źródło
10

Wiem, że pytasz, jak wyłączyć tę opcję, ale wydaje mi się, że efekt wizualny użytkownika końcowego jest taki sam w przypadku tego rozwiązania, chociaż prawdopodobnie jest on nieznacznie mniej wymagający pod względem zasobów.

Użyj tagu optgroup , na przykład:

<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>
Mandragora
źródło
3
To nie działa, OP musi być domyślnie wybrany jsfiddle.net/tomsihap/5xm7grnb
tomsihap
10

Electron + React Niech dwie pierwsze opcje będą takie

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

Pierwsza wyświetlana po zamknięciu Druga wyświetlana jako pierwsza po otwarciu listy

Benzoes
źródło
8

Użyj hidden.

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

Nie powoduje to jej usunięcia, ale można ją jednak ukryć w opcjach, gdy jest wyświetlana domyślnie.

Thielicious
źródło
6

Kolejne rozwiązanie tagów SELECT dla tych, którzy chcą pozostawić pierwszą opcję pustą.

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

c0degeas
źródło
3
 selected disabled="true"

Użyj tego. Będzie działać w nowych przeglądarkach

Ronak Bokaria
źródło
3

możemy wyłączyć tę technikę.

<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
źródło
1

Jeśli używasz jQuery do wypełnienia wybranego elementu, możesz użyć tego:

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

Pozwoli to użytkownikowi zobaczyć pierwszą opcję jako wyłączony nagłówek („Wybierz tagowanie”) i wybrać wszystkie pozostałe opcje.

wprowadź opis obrazu tutaj

Cybernetyczny
źródło
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>

użyj „SELECTED”, którą opcję chcesz wybrać domyślnie. dzięki

Abdullah Mahi
źródło
Poradnik dotyczący tego pytania został już opublikowany tutaj: stackoverflow.com/a/42997841/2943403 Twoja odpowiedź nie dodaje żadnej nowej wartości do strony, a jedynie przyczynia się do jej powiększenia.
mickmackusa
-1

Możesz ustawić, która opcja jest domyślnie wybrana w następujący sposób:

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

Sugerowałbym użycie javascript i JQuery do obserwowania zdarzenia kliknięcia i wyłączania pierwszej opcji po wybraniu innej: Najpierw nadaj elementowi identyfikator w następujący sposób:

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

oraz opcja id:

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

następnie:

<script type="text/javascript">

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

Następnie po prostu utwórz funkcję:

function handleClickFunction () {

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

S_UMan
źródło