Datenliste seltsame Verhalten

Question

Hier sind zwei verschiedene datalist ein mit patient filenumber anderen mit staatlichen

<input type="list" class="form-control" name="patient" list="patient-list" placeholder="Enter Patient file number"> 
 
      <datalist id="patient-list"> 
 
      <option value='49'>pc123</option> 
 
      <option value='48'>pc162</option> 
 
      <option value='47'>pc183</option> 
 
      <option value='45'>pc193</option> 
 
      </datalist> 
 

 
<input type="list" class="form-control" name="state" list="state-list" placeholder="Enter state"> 
 
      <datalist id="state-list"> 
 
      <option value='delhi'>delhi</option> 
 
      <option value='mumbai'>mumbai</option> 
 
      <option value='Haryana'>Haryana</option> 
 
      <option value='Gurgaon'>Gurgaon</option> 
 
      </datalist>

Wenn Sie Menü öffnen beide Drop-Down für Sie input für Patienten zeigen value & innerHTML beide und umgekehrt feststellen werden (Beim Klicken gibt es einen Wert in das Eingabefeld ein. Und in State input zeigt es einfach einfach

Was ist der Grund für diese unterschiedlichen Verhaltensweisen? ich eingeben möchten input nur innerHTML von option ähnlichen Zustand zu zeigen und haben unterschiedliche Daten in value & innerHTML

Answer 1

<datalist> Mit funktioniert nicht wie <select>. Es zeigt immer das Attribut value an und lässt es nicht standardmäßig ändern. Diese Antwort zeigt, wie verschiedene Texte angezeigt werden, wenn Sie benötigen - es besteht ein data- Attribut der Verwendung und Verarbeitung mit JavaScript:

Show datalist labels but submit the actual value

Answer 2

Während ich kann nicht Ihre genaue Frage beantworten, I.E. "Was ist der Grund dafür?", Kann ich Ihnen sagen warum es passiert.

Aufgrund der beabsichtigten Funktionalität des Programms, auf dem der Code ausgeführt wird (unabhängig davon, welchen Webbrowser Sie gerade ausführen), wird das .innerHTML-Attribut nur dann rechts vom Optionselement angezeigt, wenn der .innerHTML-Wert und der Wert .value abweichen.

Hier eine Geige ist dies in Aktion zeigt, habe ich die erste Option geändert, um den gleichen .innerHTML Wert und .value Wert als ein Beispiel haben: https://jsfiddle.net/87h3bcwd/

Weiterführende Literatur auf dem Datalist-Elemente, das ich gefunden nützlich bei der Beantwortung dieser Frage: http://www.w3.org/TR/html5/forms.html#the-datalist-element

Code:

<input type="list" class="form-control" name="patient" list="patient-list" placeholder="Enter Patient file number"> 
 
      <datalist id="patient-list"> 
 
      <option value='49'>49</option> 
 
      <option value='48'>pc162</option> 
 
      <option value='47'>pc183</option> 
 
      <option value='45'>pc193</option> 
 
      </datalist> 
 

 
<input type="list" class="form-control" name="state" list="state-list" placeholder="Enter state"> 
 
      <datalist id="state-list"> 
 
      <option value='delhi'>delhi</option> 
 
      <option value='mumbai'>mumbai</option> 
 
      <option value='Haryana'>Haryana</option> 
 
      <option value='Gurgaon'>Gurgaon</option> 
 
      </datalist>