<Mehrere auswählen> - Wie kann nur ein Element ausgewählt werden?

134

Ich habe ein <SELECT multiple>Feld mit mehreren Optionen und möchte zulassen, dass nur eine Option gleichzeitig ausgewählt wird. Der Benutzer kann jedoch die STRG-Taste gedrückt halten und mehrere Elemente gleichzeitig auswählen.

Gibt es eine Möglichkeit, wie es geht? (Ich möchte nicht 'multiple' entfernen).

html html-select

— simPod
quelle

5

Was? Warum? Dies muss näher erläutert werden.

— Dai

5

Indem Sie nicht mehrere mit Ihrer Auswahl verwenden? :)

— GordonM

5

@GordonM ja total: PI war auf der Suche für das gleiche heute , weil ich mehrere Elemente wollte zeigen (die mit dem angedeutet wird multipleAttribute) ohne tatsächlich in der Lage zu sein mehr auszuwählen. sizeIch habe vergessen, dass das Attribut dafür aufgerufen wurde , daher hat mir die beste Antwort gute Dienste geleistet :)

— Luc,

Ich persönlich habe ein Mehrfachauswahlfeld, in dem ich vier Optionen habe, und ich möchte, dass drei der Optionen ausgewählt werden können, aber das vierte muss allein sein, wenn es ausgewählt wird, da es mit den anderen drei (3 Optionen und eine "keine" kollidieren würde ")

— RWolfe

281

Machen Sie es einfach nicht zu einem ausgewählten Vielfachen, sondern legen Sie eine Größe fest, z.

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

Arbeitsbeispiel: https://jsfiddle.net/q2vo8nge/

— Marcos Placona
quelle

Ist es möglich, die Gesamtzahl von <Option> im Größenattribut programmgesteuert zu zählen?

— MyName

@ Natasha Sie können den Wert des Größenfeldes mit jquery erhalten :-)

— Vladimir verleg

Größe relevante Informationen: Platzieren die selectin einem display: flexBehälter, und tut flex-grow: 1auf denen selectes zu behandeln verursachen werden size="3"als Mindesthöhe, und dann lassen Sie die Höhe der gesamten Auswahl auf die maximale Größe möglich in Ihrem Behälter. jsfiddle.net/z1gypahs

— Torxed

25

Wenn der Benutzer nur eine Option gleichzeitig auswählen soll, entfernen Sie einfach das "Mehrfache" - treffen Sie eine normale Auswahl:

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

Geige

— MacGucky
quelle

9

Warum möchten Sie das multipleAttribut nicht entfernen ? Der gesamte Zweck dieses Attributs besteht darin, dem Browser anzugeben, dass aus dem angegebenen selectElement mehrere Werte ausgewählt werden können . Wenn nur ein einziger Wert ausgewählt werden soll, entfernen Sie das Attribut, und der Browser kann nur eine einzige Auswahl zulassen.

Verwenden Sie die Werkzeuge, die Sie haben, dafür sind sie da.

— David
quelle

1

Ah. Das Größenattribut funktioniert auch eigenständig. nicht bemerkt. danke

— simPod

6

@simPod Die Argumentation ist, dass es Zeiten gibt, in denen Kunden alle Optionen vor sich sehen müssen, aber nur eine davon auswählen können. Es ist so lange her, dass ich "echtes" HTML geschrieben habe, dass ich die Antwort googeln / bingen musste ... Oh, Gott sei Dank für StackOverflow einige Tage.

— Richard B

1

Sie möchten standardmäßig nur eine Option, aber der Benutzer kann durch Drücken der STRG-Taste mehrere Optionen auswählen. Genau so soll sich das SELECT-Vielfache verhalten.

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

Können Sie bitte Ihre Frage klären?

— Cogicero
quelle

Awww Ich verstehe die Frage jetzt dank Marcos Placona. Die erste Frage war nicht gut formuliert.

— Cogicero

Obwohl ich persönlich denke, dass es für die Benutzererfahrung "unfair" ist, wenn Sie mehrere Auswahloptionen anzeigen, kann der Benutzer jedoch nur eine auswählen.

— Cogicero

1

hängt von der Situation ab

— simPod

1

Ich komme hierher, nachdem ich Google durchsucht und etwas an meinem Ende geändert habe.

Also ändere ich einfach dieses Beispiel und es wird zur Laufzeit mit jquery funktionieren.

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

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

— Ajay2707
quelle

4

Sie tun im Grunde das, was die akzeptierte Antwort tut, aber auf verschlungene Weise. Anstatt das multiple Attribut zur Laufzeit zu entfernen, können Sie es einfach direkt im HTML-Code entfernen. jsfiddle.net/3rkk6m9a

— Harry

1

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

Diese einfache Lösung ermöglicht es, visuell eine Liste von Optionen zu erhalten, aber nur eine auswählen zu können.

— Ste
quelle

4

Willkommen bei SO. Bitte fügen Sie eine ausführliche Beschreibung hinzu

— Andriy Ivaneyko

1

Ich hatte einige Probleme mit der Auswahl \ Mehrfachauswahl. Dies war der Trick für mich

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

— Ewan
quelle

0

Spät zu antworten, aber möglicherweise jemand anderem zu helfen. Hier erfahren Sie, wie Sie dies tun, ohne das Attribut 'multiple' zu entfernen.

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

— DotNetFullStack
quelle

Hinweis: Dies erfordert das Plugin jQuery Chosen : vesthq.github.io/chosen

— smolo