boş olarak varsayılan seçim seçeneği

459

HTML'de açılır menüde varsayılan olarak seçili olmamam gereken çok garip bir gereksinimim var. Ancak,

Bunu kullanamam,

<select>
  <option></option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>
Snippet'i genişlet

Çünkü bunun için ilk seçeneği işlemek için doğrulama yapmam gerekecek. Seçme etiketinin bir parçası olarak ilk seçeneği eklemeden kimse bu hedefe ulaşmamda bana yardımcı olabilir mi?

html 
— Pankaj Parashar
kaynak
2
Bildiğim kadarıyla boş bir satır almanın tek yolu bu. Doğrulama yapmak zorunda kalacak ne demek istiyorsun? Value = "" olup olmadığını söylemek için bir onay ayarlayın ve false değerini döndürün.
— Robert
1
Bu, bir açılır menü yerine radyo düğmelerini kullanmak için iyi bir fırsat olacaktır.
— Blazemonger
9
Bence hiç de garip bir gereklilik değil. Ben aynı gemideyim. Ben de 'seçenek yok' varsayılan gerekir. Form göndermeniz gerekmeyen birkaç açılır menü var. Bunları bu şekilde devre dışı bırakmak, kullanıcının uygun olmadığında bir seçim yapmasını engeller. İyi soru! +1
— Scott
Garip bir gereklilik değil, eğer SELECT bir REQUIRED özelliğine sahipse, bir yer tutucu etiket seçeneğine sahip olmak HTML5 dev.w3.org/html5/spec-preview/…
— Testo Testini
@Blazemonger radyo düğmeleri 3 veya 4'ten fazlasına sahipseniz korkunç bir fikirdir. 15+ veya 50 veya daha fazla seçenek içeren bir açılır liste mi hayal ediyorsunuz? Bunlar birçok durumda kendi tasarım sorunları var ancak sorun hala radyo düğmeleri iyi ölçek olmadığını duruyor hiç .
— TylerH

Yanıtlar:

1016

Belki bu yardımcı olacaktır

<select>
    <option disabled selected value> -- select an option -- </option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

-- select an option --Varsayılan olarak görüntülenecektir. Ancak bir seçenek belirlerseniz, bu seçeneği geri seçemezsiniz.

Boş bir ekleyerek de gizleyebilirsiniz. option

<option style="display:none">

bu yüzden artık listede görünmeyecek.

seçenek 2

CSS yazmak istemiyorsanız ve yukarıdaki çözümün aynı davranışını bekliyorsanız, şunu kullanın:

<option hidden disabled selected value> -- select an option -- </option>

— Gambit
kaynak
15
İşte herkesin ihtiyacı varsa , yukarıda bir JSFiddle .
— Uwe Keim
27
@Rafael_Mori'nin @azerafati, "gizli" özniteliğini kullanarak aynı şeyi elde edebileceğinize işaret ettiğinden CSS gerekmez. Sadece saf HTML5;)<option hidden disabled selected value> -- select an option -- </option>
— BrainOverflow
Geri seçebilmek istersem ne olur? Sadece bir şey göndermesini istemiyorum. Mümkün mü?
— Michael Rogers
1
seçenek öğesine gizli bir özellik eklemek benim için sihir yaptı! bu kadar kolay olmasını beklemiyordum. teşekkürler
— S. Domeng
Unutmayın, hem gizli özellik hem de ekran stili 11'de bile IE'de çalışmaz. Stackoverflow.com/questions/58862242/…
— yatskovsky
113

Bunu başarmak için Javascript kullanabilirsiniz. Aşağıdaki kodu deneyin:

HTML

<select id="myDropdown">      
    <option>Option 1</option>     
    <option>Option 2</option>     
    <option>Option 3</option>     
</select>

JS

document.getElementById("myDropdown").selectedIndex = -1;

veya JQuery

$("#myDropdown").prop("selectedIndex", -1);
— Matschie
kaynak
Bu çözüm kısmen Chrome 35 ile çalışır: seçenek listesi görünmez olduğunda açılır liste herhangi bir seçim göstermez, ancak seçenekler listesi görünür hale getirildiğinde seçilen ilk seçeneği gösterir. Safari 7 amaçlandığı gibi davranır.
— flochtililoch
İlginç olan şu: HTML form doğrulamasıyla çalışıyor. Öğe requiredüzerindeki özniteliği kullanır ve selectbir seçenek belirlemeden gönderirseniz, form doğrulaması başarısız olur ve size bildirirse, bir seçim yapmanız gerekir. Bu yüzden bu yaklaşımı gerçekten seviyorum. (En azından Chrome'da test edildi)
— Andreas Linnert
— Çalışmıyor
1
2019 itibariyle, sadece Safari IOS 10 bununla top oynamayı reddediyor
— Ayyash
37

Bugün (2015-02-25)

Bu geçerli bir HTML5'tir ve sunucuya bir boşluk (boşluk değil) gönderir:

<option label=" "></option>

Http://validator.w3.org/check adresinde doğrulanmış geçerlilik

Win7 (IE11 IE10 IE9 IE8 FF35 Safari5.1) Ubuntu14.10 (Chrome40, FF35) OSX_Yosemite (Safari8, Chrome40) Android (Samsung-Galaxy-S5) ile doğrulanmış davranış

Aşağıdakiler de bugün doğrulamayı geçiyor , ancak bir çok boşluk karakterini de sunucuların çoğundan (muhtemelen istenmiyor) ve başkalarına boş bırakıyor (Chrome40 / Linux boş bırakıyor):

<option>&#160;</option>

Önceki (2013-08-02)

Notlarıma göre, yukarıda gösterilen seçenek etiketlerinin içindeki boşluk olmayan varlık 2013'te şu hatayı verdi:

Hata: W3C İşaretleme Doğrulama Hizmeti (Genel): Seçme öğesinin gerekli özniteliği olan ve çoklu özniteliği olmayan ve boyutu 1 olan ilk alt seçenek öğesinin boş değer özniteliği olması veya metin içeriği olmaması gerekir.

O zaman, normal bir alan XHTML4 geçerliydi ve her tarayıcıdan sunucuya bir boşluk (boşluk değil) gönderdi:

<option> </option>

gelecek

Spec açıkça boş bir seçeneğe izin verecek şekilde güncellenmiş olsaydı kalbimi memnun ederdi. Tercihen en kısa sözdizimini kullanarak. Aşağıdakilerden herhangi biri harika olurdu:

<option />
<option></option>

Test Dosyası

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Test</title>
</head>
<body>
  <form action="index.html" method="post">
    <select name="sel">
      <option label=" "></option>
    </select>
  </form>
</body>
</html>
— GlenPeterson
kaynak
15 

<td><b>Ação da atividade:</b><br>
	<select style='align:left; width:100%;' id='cbxTipoSFA' name='cbxTipoSFA'>
	<option hidden selected>Selecione uma opção</option>
	<option value='Instalação'>Instalação</option>
	<option value='Solicitação'>Solicitação</option>
	<option value='Retirada'>Retirada</option></select>
</td>
Snippet'i genişlet

Açılır listede gizlemek istediğiniz seçeneğe "gizli" yazmanız yeterlidir.

— Rafael Mori
kaynak
8

Yalnızca CSS kullanarak çalışan çözüm:

A: Satır İçi CSS

<select>
    <option style="display:none;"></option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>
Snippet'i genişlet

B: CSS Stil Sayfası

Elinizde bir CSS dosyanız varsa, ilkini aşağıdakileri optionkullanarak hedefleyebilirsiniz :

select.first-opt-hidden option:first-of-type {
  display:none;
}
<select class="first-opt-hidden">
    <option></option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>
Snippet'i genişlet

— Kai Noack
kaynak
4

Bu yardımcı olacaktır:

https://www.w3schools.com/tags/att_select_required.asp

 <form>
 <select required>
  <option value="">None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<button type="submit">Submit</button>
</form>
Snippet'i genişlet

— rohan parab
kaynak
Bu gereksinimi elde etmenin en modern (html5) yolu, bunun bir type = gönder düğmesi gerektirdiğini unutmayın. Bir tıklama gönderme işleyicisine sahip bir type = düğmesi kullanıcının otomatik olarak seçim yapmasını gerektirmez.
— Arjan
3 
<select required>
  <option value="" disabled selected>None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Bu durumda özel doğrulamadan kaçınabilirsiniz.

— Fawaz
kaynak
2

Sadece küçük bir açıklama:

bazı Safari tarayıcıları ne "gizli" özniteliğe ne de "display: none" stil ayarına saygı duymaz (MacOS 10.12.6 altında Safari 12.1 ile test edilmiştir). Açık bir yer tutucu metni olmadan, bu tarayıcılar seçenekler listesinde boş bir ilk satır gösterir. Bu nedenle, bu "kukla" giriş için her zaman açıklayıcı bir metin sağlamak yararlı olabilir:

<option hidden disabled selected value>(select an option)</option>

"Devre dışı" özelliği sayesinde, zaten aktif olarak seçilmeyecek.

— Andreas Rozek
kaynak
1

Ne yapmaya çalıştığınızı anlıyorum. En iyi ve en başarılı yol:

<select name='department' required>
   <option value="">None</option>
   <option value="Teaching">Teaching department</option>
   <option value="nonTeaching">Non-teaching department</option> 
</select>
— Guryash Singh
kaynak
1

Gerçekten ilginç buldum çünkü çok uzun zaman önce aynı şeyi deneyimledim. Ancak internette bununla ilgili çözüm ile ilgili bir örnekle karşılaştım.

Daha fazla uzatmadan, aşağıdaki kod parçasına bakın:

<select>
 <option value data-isdefault="true">--Choose one Option--</option>
 <option>Option 1</option>
 <option>Option 2</option>
 <option>Option 3</option>
</select>

Bununla birlikte, her zaman gönderilemez ancak seçilebilir kalacaktır. Kullanıcı Arayüzü için daha fazla kolaylık ve Kullanıcı Deneyimi için mükemmel.

Hepsi bu, umarım yardımcı olur. Şerefe!

— farisfath25
kaynak
Bunu gönderememekle birlikte kullanıcının dikkatini açılır
— listeye
@lofacture: giriş için teşekkürler. aslında, ben yazdım kodu istediğini idi, ama evet dediğin gibi, kullanıcının / sahibinin ihtiyaçlarına bağlıdır
— farisfath25
0

HTML çözümü yoktur. HTML 4.01 spesifikasyonuna göre, optionöğelerin hiçbiri selectedözniteliğe sahip değilse ve pratikte tarayıcıların yaptığı ilk seçeneği önceden seçmiş olmalarıdır , tarayıcı davranışı tanımlanmamıştır .

Geçici bir çözüm olarak, öğeyi (aynı öznitelikle) selectbir dizi öğeyle değiştirebilirsiniz . Bu, farklı görünüm ve kullanıcı arayüzü ile aynı türden bir kontrol oluşturur. Öğelerin hiçbiri bu özelliğe sahip değilse , çoğu modern tarayıcıda başlangıçta hiçbiri seçilmez.input type=radionameinput type=radiochecked

— Jukka K. Korpela
kaynak
0

Laravel 5 çerçevesini kullanıyorum ve @ Gambi `nin yanıtı da benim için çalıştı, ancak projem için bazı değişiklikler yapıldı.

Bir veritabanı tablosunda seçenek değerleri var ve ben bir foreach deyimi ile kullanın. Ama açıklamadan önce @Gambit önerilen ayarları ile bir seçenek ekledim ve işe yaradı.

İşte benim örnek:

@isset($keys)
  <select>
    <option  disabled selected value></option>
    @foreach($keys as $key)
      <option>{{$key->value)</option>
    @endforeach
  </select>
@endisset

Umarım bu da birine yardımcı olur. İyi işlere devam edin!

— Oracle günlüğü
kaynak
0

Bunu dene:

<h2>Favorite color</h2>
<select name="color">
<option value=""></option>
<option>Pink</option>
<option>Red</option>
<option>Blue</option>
</select>

Açılır menüdeki ilk seçenek boş olacaktır.

— Abhijit pai
kaynak
0

Göstermek için lütfen açılır menüden bir değer seçin seçildikten sonra gizleyin. lütfen aşağıdaki kodu kullanın.

ayrıca gerekli doğrulamayı da destekleyecektir.

<select class="form-control" required>
<option disabled selected value style="display:none;">--Please select a value</option>
              <option >Data 1</option>
              <option >Data 2</option>
              <option >Data 3</option>
</select>
Snippet'i genişlet

— Bathri Nathan
kaynak
0

Açısal (2+), (veya başka bir çerçeve) kullanıyorsanız, biraz mantık ekleyebilirsiniz. Mantık şu şekildedir: yalnızca kullanıcı henüz başka birini seçmediyse boş bir seçenek görüntüler. Kullanıcı bir seçenek belirledikten sonra, boş seçenek kaybolur.

Açısal (9) için bu şöyle görünecektir:

<select>
    <option *ngIf="(hasOptionSelected$ | async) === false"></option>
    <option *ngFor="let option of (options$ | async)[value]="option.id">{{ option.title }}</option>
</select>
— Mike de Klerk
kaynak
-2

Bunu dene:

<select>
    <option value="">&nbsp;
    <option>Option 1
    <option>Option 2
    <option>Option 3
</select>

HTML5'te doğrular. requiredSelect öğesinde öznitelik ile çalışır . Can yeniden seçilen olun. Google Chrome 45, Internet Explorer 11, Edge, Firefox 41'de çalışır.

— Tristan Bailey
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.