HTML-Auswahlformular mit Option zur Eingabe eines benutzerdefinierten Werts

100

Ich hätte gerne ein Eingabefeld, in das Benutzer einen benutzerdefinierten Textwert eingeben oder aus einer Dropdown-Liste auswählen können. Ein Stammgast <select>bietet nur Dropdown-Optionen.

Wie kann ich einen <select>benutzerdefinierten Wert akzeptieren? Zum Beispiel: Ford?

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
html forms Ib33X
quelle
Sie könnten Javascript verwenden, um der Auswahl dynamisch eine Option hinzuzufügen, aber dann würde die Verwendung dieser Informationen zu einem echten Problem werden.
David
Ich habe diese Option für benutzerdefinierte Werte auf meiner Website finnmglas.com/contact nicht hinzugefügt, aber jemand hat mich mit einem benutzerdefinierten Wert kontaktiert. Das ist so komisch
finnmglas

Antworten:

243

HTML5 verfügt über ein integriertes Kombinationsfeld. Sie erstellen einen Text inputund a datalist. Dann fügen Sie dem ein listAttribut hinzu input, mit dem Wert des idvon datalist.

Update: Ab März 2019 unterstützen alle gängigen Browser (jetzt einschließlich Safari 12.1 und iOS Safari 12.3) datalistdas für diese Funktionalität erforderliche Niveau. Ausführliche Informationen zur Browserunterstützung finden Sie unter caniuse .

Es sieht aus wie das:

<input type="text" list="cars" />
<datalist id="cars">
  <option>Volvo</option>
  <option>Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
</datalist>
Erweitern Sie das Snippet

Dmitry
quelle
3
Diese Funktion wird nur von etwa 50% der Browser unterstützt. Dies wird nur von den neuesten Firefox-, Chrome- und Opernprogrammen unterstützt. IE, Safari und mobile Browser nicht. Siehe http://caniuse.com/
markmarijnissen
2
Es ist Mitte 2016 (mehr als 2 Jahre später), und die meisten Browser unterstützen dies immer noch nicht vollständig, zumindest ohne signifikante Fehler. Zumindest funktioniert etwas mit neueren Versionen von fast allem außer Safari / Safari iOS, aber Sie müssen testen, um sicherzustellen, dass Ihre Anwendungsfälle ordnungsgemäß funktionieren. Es ist immer noch die beste Antwort.
Michael Gaskill
1
Es funktioniert gut für mich. In vielen Fällen müssen wir keine alten Browser unterstützen. Ich habe nur das Bild "Abwärtspfeil" im Hintergrund des Eingabefelds hinzugefügt, um den Benutzern einen Hinweis zu geben, dass es erweiterbar ist. Code (Sie benötigen eine aktuelle Bilddatei):<input type="text" list="cars" style="background:url('images/arrow_down.png') no-repeat right center">
Eugene Kardash
4
Ich habe gerade in neueren Versionen von IE, Firefox und Chrome getestet, wobei alles einwandfrei funktioniert. Ich denke, dies ist in vielen Fällen eine großartige einfache Lösung für dieses häufige Problem.
Kerl
3
Ich wollte das wirklich verwenden, aber ich musste einen Standardwert festlegen. Der Benutzer sieht nur die Standardeinstellung in der Dropdown-Liste im Vergleich zu allen Optionen (da sie herausgefiltert sind). Sie müssten wissen, dass sie das Eingabefeld löschen müssen, bevor sie alle Optionen sehen können.
Justin
24

Alen Saqes neueste JSFiddle hat in Firefox nicht für mich umgeschaltet, daher dachte ich, ich würde eine einfache HTML / Javascript-Problemumgehung bereitstellen, die innerhalb von Formularen (in Bezug auf die Übermittlung) gut funktioniert, bis das Datenlisten-Tag von allen Browsern / Geräten akzeptiert wird. Weitere Informationen und Informationen in Aktion finden Sie unter: http://jsfiddle.net/6nq7w/4/ Hinweis: Lassen Sie keine Leerzeichen zwischen umschaltenden Geschwistern zu!

<!DOCTYPE html>
<html>
<script>
function toggleField(hideObj,showObj){
  hideObj.disabled=true;        
  hideObj.style.display='none';
  showObj.disabled=false;   
  showObj.style.display='inline';
  showObj.focus();
}
</script>
<body>
<form name="BrowserSurvey" action="#">
Browser: <select name="browser" 
          onchange="if(this.options[this.selectedIndex].value=='customOption'){
              toggleField(this,this.nextSibling);
              this.selectedIndex='0';
          }">
            <option></option>
            <option value="customOption">[type a custom value]</option>
            <option>Chrome</option>
            <option>Firefox</option>
            <option>Internet Explorer</option>
            <option>Opera</option>
            <option>Safari</option>
        </select><input name="browser" style="display:none;" disabled="disabled" 
            onblur="if(this.value==''){toggleField(this,this.previousSibling);}">
<input type="submit" value="Submit">
</form>
</body>
</html>

mickmackusa
quelle
Ich würde gerne noch einmal durch diese Fummelei gehen! Die Hexenversion von Firefox wurde dort nicht unterstützt! Ich habe es mit einer Version getestet, an die ich mich nicht erinnere! Ein großes Lob!
Alen Saqe
Ich weiß nicht, auf welcher Version von FF ich war. Ich habe mir gerade FF34.0 angesehen und bekomme jetzt Funktionalität, also keine Sorge. Die Standard-Umschaltoption "Andere" kann jedoch deaktiviert werden. Wenn ich "Andere" durch Bearbeiten des Werts entferne, bietet das Dropmenü keinen intuitiven Wert zur Auswahl (um auf die Bearbeitungsfunktion zuzugreifen). Ich denke, das hängt von den persönlichen Vorlieben ab. Da der Dropmenü-Pfeil noch vorhanden ist, wenn das Feld bearbeitet werden kann, erkennen Benutzer möglicherweise nicht, dass das Feld bearbeitet werden kann. Ich habe keine Ahnung von dir. nur ein paar Rückmeldungen. Mein Snippet berücksichtigt auch die Feldbenennung innerhalb eines <Formulars>.
Mickmackusa
Das Endergebnis dieses genialen, aber für mich nicht entzifferbaren Skripts + HTML ist das Anhängen des ausgewählten Optionswerts oder des eingegebenen Textes an ein GET derselben Seite wie eine Abfragezeichenfolge. Weiß jemand, wie man die Aktion in einen POST konvertiert, damit ich den Wert in einer PHP-Datei abrufen und dort etwas damit anfangen kann?
Han
Ich habe dieses Skript mit der spezifischen Absicht verfasst, dass es sich gemäß den HTML-Formularübermittlungen verhält. Verwenden Sie die Post-Methode als Attribut im Formular-Tag? @ Han, wenn Sie einen 3v4l.org-Link Ihres isolierten Snippets erstellen, kann ich einen kurzen Blick darauf werfen und möglicherweise beraten.
Mickmackusa
1
Junge, fühle ich mich dumm? Ich habe vergessen, eine Methode in das Formular-Tag einzufügen. Es funktionierte wie gepostet mit dieser sehr geringfügigen Änderung: <form name = "BrowserSurvey" method = "post" action = "/ gotThis.php"> ... Wunderschönes Skript, mickmackusa. Vielen Dank für Ihren Hinweis!
Han
13

jQuery-Lösung!

Demo: http://jsfiddle.net/69wP6/2/

Eine weitere Demo unten (aktualisiert!)

Ich brauchte etwas Ähnliches in einem Fall, in dem ich einige feste Optionen hatte und ich wollte, dass eine andere Option bearbeitet werden kann! In diesem Fall habe ich eine versteckte Eingabe gemacht, die die Auswahloption überlappt und bearbeitet werden kann, und jQuery verwendet, damit alles nahtlos funktioniert.

Ich teile die Geige mit euch allen!

HTML

<div id="billdesc">
    <select id="test">
      <option class="non" value="option1">Option1</option>
      <option class="non" value="option2">Option2</option>
      <option class="editable" value="other">Other</option>
    </select>
    <input class="editOption" style="display:none;"></input>
</div>

CSS

body{
    background: blue;
}
#billdesc{
    padding-top: 50px;
}
#test{
    width: 100%;
    height: 30px;
}
option {
    height: 30px;
    line-height: 30px;
}

.editOption{
    width: 90%;
    height: 24px;
    position: relative;
    top: -30px

}

jQuery 

var initialText = $('.editable').val();
$('.editOption').val(initialText);

$('#test').change(function(){
var selected = $('option:selected', this).attr('class');
var optionText = $('.editable').text();

if(selected == "editable"){
  $('.editOption').show();


  $('.editOption').keyup(function(){
      var editText = $('.editOption').val();
      $('.editable').val(editText);
      $('.editable').html(editText);
  });

}else{
  $('.editOption').hide();
}
});

Bearbeiten: In Bezug auf das Design wurden einige einfache Details hinzugefügt, damit die Benutzer klar sehen können, wo die Eingabe endet!

JS Fiddle: http://jsfiddle.net/69wP6/4/

Alen Saqe
quelle
11

Das kannst du nicht wirklich. Sie müssen sowohl das Dropdown-Menü als auch das Textfeld haben und das Formular auswählen oder ausfüllen. Ohne Javascript könnten Sie ein separates Optionsfeld erstellen, in dem Dropdown- oder Texteingaben ausgewählt werden. Dies scheint mir jedoch unübersichtlich. Mit etwas Javascript können Sie das eine oder andere deaktivieren, je nachdem, welches Sie auswählen. Beispielsweise haben Sie eine 'andere' Option in der Dropdown-Liste, die das Textfeld auslöst.

Sam
quelle
8

Wenn die Datenlistenoption Ihre Anforderungen nicht erfüllt, sehen Sie sich die Select2-Bibliothek und die " Dynamische Optionserstellung " an.

$(".js-example-tags").select2({
  tags: true
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>


<select class="form-control js-example-tags">
  <option selected="selected">orange</option>
  <option>white</option>
  <option>purple</option>
</select>
Erweitern Sie das Snippet

Sogeking
quelle
0

Mit einer der oben genannten Lösungen (@mickmackusa) habe ich in React 16.8+ mit Hooks einen funktionierenden Prototyp erstellt.

https://codesandbox.io/s/heuristic-dewdney-0h2y2

Ich hoffe es hilft jemandem.

dano
quelle
Ich bin geehrt. Ich habe gerade meine Unterlagen überprüft und dies war der 12. Beitrag, den ich hier auf Stack Overflow gemacht habe - es fühlt sich an wie vor einer Million Jahren.
Mickmackusa