<Çoklu seç> - yalnızca bir öğenin seçilmesine nasıl izin verilir?

134

<SELECT multiple>Birden fazla seçenek içeren bir alanım var ve aynı anda yalnızca bir seçeneğin seçilmesine izin vermek istiyorum, ancak kullanıcı CTRL tuşunu basılı tutup aynı anda daha fazla öğe seçebilir.

Bunu yapmanın bir yolu var mı? ('Birden çok' kaldırmak istemiyorum).

html html-select

— simPod
kaynak

5

Ne? Neden? Bunun daha fazla açıklanması gerekiyor.

— Dai

5

Seçtiğiniz ürünle birden fazla kullanmıyor musunuz? :)

— GordonM

5

@GordonM evet tamamen: PI bugün aynısını arıyordu çünkü aslında birden fazla öğeyi seçmeden birden fazla öğenin gösterilmesini istedim (bu özellik ile ima multipleediliyor). Bunu yapma özelliğinin çağrıldığını unuttum size, bu yüzden en iyi cevap bana iyi hizmet etti :)

— Luc

Şahsen ben dört seçenek var seçilebilir bir çoklu alan var ve üç seçenek seçilebilmesini istiyorum ama dördüncü bir seçildiğinde yalnız olması gerekir çünkü diğer üç (3 seçenek ve bir "hiçbiri ile çakışacaktır ")

— RWolfe

281

Sadece seçili bir çoklu yapmayın, ancak buna bir boyut ayarlayın:

  <select name="user" id="userID" size="3">
    <option>John</option>
    <option>Paul</option>
    <option>Ringo</option>
    <option>George</option>
  </select>

Çalışma örneği: https://jsfiddle.net/q2vo8nge/

— Marcos Placona
kaynak

Boyut özelliğinde toplam <seçenek> sayısını programlı olarak saymak mümkün mü?

— MyName

@Natasha jquery kullanarak boyut alanının değerini alabilirsiniz :-)

— Vladimir verleg

Boyutla ilgili bilgi:select Bir display: flexkabın içine yerleştirmek ve bunu yapmak flex-grow: 1, minimum yükseklik olarak selectişlem görmesine neden olacak size="3"ve daha sonra tüm seçimin yüksekliğini kapınızda mümkün olan maksimum boyuta getirecektir. jsfiddle.net/z1gypahs

— Torxed

25

Kullanıcının bir kerede yalnızca bir seçenek seçmesi gerekiyorsa, "çoklu" seçeneğini kaldırın - normal bir seçim yapın:

  <select name="mySelect" size="3">
     <option>Foo</option>
     <option>Bar</option>
     <option>Foo Bar</option>
     <option>Bar Foo</option>
  </select>

Vaktini boşa harcamak

— MacGucky
kaynak

9

Neden bu multipleözelliği kaldırmak istemiyorsunuz ? Bu özelliğin amacı tarayıcıya verilen değerden birden fazla değer seçilebileceğini belirtmektir.select öğeden . Yalnızca tek bir değer seçilmesi gerekiyorsa, özelliği kaldırın; tarayıcı yalnızca tek bir seçime izin vereceğini bilir.

Sahip olduğunuz araçları kullanın, hepsi bunun için.

— David
kaynak

1

Ah. size niteliği tek başına da çalışır. fark etmedim. teşekkürler

— simPod

6

@simPod'un nedeni, müşterilerin önlerindeki tüm seçenekleri görmesi gereken zamanlar olduğu, ancak yalnızca 1 tanesini seçebileceği zamanlardır. "Gerçek" html yazdığımdan beri çok uzun zaman oldu, cevabı google / bing yapmak zorunda kaldım ... Birkaç gün StackOverflow için cennete teşekkür ederim.

— Richard B

1

Varsayılan olarak yalnızca bir seçenek istersiniz, ancak kullanıcı CTRL tuşuna basarak birden çok seçenek belirleyebilir. SELECT katının tam olarak nasıl davrandığı budur.

Bunu gör: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_multiple

Sorunuzu açıklığa kavuşturabilir misiniz?

— Cogicero
kaynak

Awww şimdi soruyu anlıyorum, Marcos Placona sayesinde. İlk soru iyi ifade edilmedi.

— Cogicero

Her ne kadar kişisel olarak birden fazla seçim seçeneği gösterdiğinizde kullanıcının deneyimine "haksız" olduğunu düşünmeme rağmen kullanıcı yalnızca birini seçebilir.

— Cogicero

1

duruma bağlı

— simPod

1

Ben google arama ve sonunda değiştirmek bir şey sonra buraya geliyorum.

Bu yüzden sadece bu örneği değiştiriyorum ve çalışma zamanında jquery ile çalışacak.

$('select[name*="homepage_select"]').removeAttr('multiple')

http://jsfiddle.net/ajayendra2707/ejkxgy1p/5/

— Ajay2707
kaynak

4

Temel olarak kabul edilen cevabın ne yaptığını yapıyorsunuz, ama kıvrımlı bir şekilde. Birden çok özelliği çalışma zamanında kaldırmak yerine, doğrudan HTML'den kaldırabilirsiniz. jsfiddle.net/3rkk6m9a

— Harry

1

<select name="flowers" size="5" style="height:200px">
 <option value="1">Rose</option>
 <option value="2">Tulip</option>
</select>

Bu basit çözüm, görsel olarak bir seçenekler listesi elde etmenizi sağlar, ancak yalnızca birini seçebilir.

— Ste
kaynak

4

SO'ya hoş geldiniz. Lütfen ayrıntılı açıklama ekleyin

— Andriy Ivaneyko

1

Select \ multi-select ile bazı ilişkilerim vardı bu benim için hile yaptı

<select name="mySelect" multiple="multiple">
    <option>Foo</option>
    <option>Bar</option>
    <option>Foo Bar</option>
    <option>Bar Foo</option>
</select>

— Ewan
kaynak

0

Cevap vermek için geç kalmış ancak bir başkasına yardımcı olabilir, işte 'çoklu' özniteliği kaldırmadan bunu nasıl yapacağınız.

$('.myDropdown').chosen({
    //Here you can change the value of the maximum allowed options
    max_selected_options: 1
});

— DotNetFullStack
kaynak

Not: Bu, jQuery Chosen eklentisini gerektirir: harvesthq.github.io/chosen

— smolo