Datalist strano comportamento

Question

Qui ci sono due diversi datalist uno con patient filenumber altro con lo stato

<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>

Quando si apre menu a discesa per entrambi si noterà input per l'esposizione del paziente value & innerHTML entrambi e invertita (al clic su di esso entra valore nel campo di input). E nello stato input è sufficiente mostrare lo stato

Qual è la ragione di questi diversi comportamenti? voglio input per mostrare solo innerHTML di option come stato input e hanno dati differenti in value & innerHTML

Answer 1

Utilizzando <datalist> non funziona come <select>. Visualizza sempre l'attributo value e non consente di modificarlo per impostazione predefinita. Questa risposta dimostra come visualizzare testo diverso se è necessario - si compone di utilizzare un attributo data- ed elaborarlo con JavaScript:

Show datalist labels but submit the actual value

Answer 2

Mentre non posso rispondere alla tua domanda esatta, vale a dire "Qual è la ragione di questo", posso dirti che perché accade.

Come risultato della funzionalità prevista del programma che esegue il codice (qualunque sia il browser Web in esecuzione), l'attributo .innerHTML viene visualizzato a destra dell'elemento opzione solo se il valore .innerHTML e il valore .value differire.

Ecco un violino che mostra in azione, ho cambiato la prima opzione per avere lo stesso valore .innerHTML e il valore .value come esempio: https://jsfiddle.net/87h3bcwd/

Ulteriori letture sul Datalist elemento che ho trovato utili nel rispondere a questa domanda: http://www.w3.org/TR/html5/forms.html#the-datalist-element

Codice:

<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>