<WYBIERZ wiele> - jak zezwolić na wybranie tylko jednej pozycji?

134

Mam <SELECT multiple>pole z wieloma opcjami i chcę, aby w tym samym czasie była wybrana tylko jedna opcja, ale użytkownik może przytrzymać klawisz CTRL i wybrać więcej elementów jednocześnie.

Czy jest jakiś sposób, jak to zrobić? (Nie chcę usuwać „wielu”).

html html-select

— simPod
źródło

5

Co? Czemu? To wymaga więcej wyjaśnień.

— Dai,

5

Nie używając wielu z wybranym? :)

— GordonM

5

@GordonM tak, całkowicie: PI szukał dzisiaj tego samego, ponieważ chciałem pokazać wiele elementów (co wynika z multipleatrybutu) bez możliwości wybrania wielu. Zapomniałem, że został wywołany atrybut do tego size, więc najlepsza odpowiedź dobrze mi służyła :)

— Luc

Osobiście mam pole wyboru wielokrotnego, w którym mam cztery opcje i chcę trzy z nich, aby można było je wybrać, ale czwarta musi być sama ")

— RWolfe

281

Po prostu nie wybieraj wielokrotności, ale ustaw jej rozmiar, na przykład:

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

Przykład roboczy: https://jsfiddle.net/q2vo8nge/

— Marcos Placona
źródło

Czy można programowo policzyć całkowitą liczbę opcji <option> w atrybucie rozmiaru?

— MyName

@Natasha Wartość pola rozmiaru można uzyskać za pomocą jquery :-)

— Vladimir verleg

Informacje dotyczące rozmiaru: Umieszczenie pojemnika selectw display: flexpojemniku i zrobienie flex-grow: 1tego selectspowoduje, że będzie on traktowany size="3"jako minimalna wysokość, a następnie przyciągnie wysokość całego pojemnika do maksymalnego możliwego rozmiaru w pojemniku. jsfiddle.net/z1gypahs

— Torxed

25

Jeśli użytkownik powinien wybrać tylko jedną opcję naraz, po prostu usuń „wiele” - dokonaj normalnego wyboru:

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

Skrzypce

— MacGucky
źródło

9

Dlaczego nie chcesz usunąć multiple atrybutu? Celem tego atrybutu jest wskazanie przeglądarce, że można wybrać wiele wartości z danego selectelementu. Jeśli należy wybrać tylko jedną wartość, usuń atrybut, a przeglądarka będzie wiedziała, że zezwala tylko na jeden wybór.

Użyj narzędzi, które masz, do tego służą.

— David
źródło

1

ah. atrybut rozmiaru działa również samodzielnie. nie zauważyłem. dzięki

— simPod

6

@simPod rozumowanie jest takie, że czasami klienci muszą zobaczyć wszystkie opcje przed sobą, ale mogą wybrać tylko jedną z nich. Minęło tyle czasu, odkąd napisałem „prawdziwy” html, że musiałem wygooglować / znaleźć odpowiedź ... Och, dzięki Bogu za kilka dni StackOverflow.

— Richard B

1

Domyślnie potrzebujesz tylko jednej opcji, ale użytkownik może wybrać wiele opcji, naciskając klawisz CTRL. Dokładnie tak (już) ma zachowywać się wielokrotność SELECT.

Zobacz: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_multiple

Czy możesz wyjaśnić swoje pytanie?

— Cogicero
źródło

Awww Teraz rozumiem pytanie, dzięki Marcosowi Placonie. Pierwsze pytanie nie było dobrze sformułowane.

— Cogicero,

Chociaż osobiście uważam, że jest to „niesprawiedliwe” dla doświadczenia użytkownika, gdy wyświetlasz wiele opcji do wyboru, ale użytkownik może wybrać tylko jedną.

— Cogicero

1

zależy od sytuacji

— simPod

1

Przychodzę tutaj po przeszukaniu google i zmienię coś na moim końcu.

Po prostu zmieniam ten przykład i będzie on działał z jQuery w czasie wykonywania.

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

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

— Ajay2707
źródło

4

Zasadniczo robisz to, co robi zaakceptowana odpowiedź, ale w zawiły sposób. Zamiast usuwać atrybut wielokrotny w czasie wykonywania, możesz po prostu usunąć go bezpośrednio w kodzie HTML. jsfiddle.net/3rkk6m9a

— Harry

1

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

To proste rozwiązanie pozwala uzyskać wizualną listę opcji, ale można wybrać tylko jedną.

— Ste
źródło

4

Witamy w SO. Proszę dodać szczegółowy opis

— Andriy Ivaneyko

1

Miałem kilka problemów z select \ multi-select, to właśnie mi pomogło

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

— Ewan
źródło

0

Spóźniona odpowiedź, ale może pomóc komuś innemu, oto jak to zrobić bez usuwania atrybutu „wiele”.

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

— DotNetFullStack
źródło

Uwaga: Wymaga to wtyczki jQuery Chosen: harvesthq.github.io/chosen

— smolo