データリストの奇妙な行動

Question

ここでは、状態

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

と他のpatient filenumberと2 datalist異なるものですクリックすると入力フィールドに値が入力されます）。そして状態inputでは単に状態を表示するだけです

これらの異なる動作の理由は何ですか？ 私は状態inputのようにちょうどinnerHTMLoptionのを示し、value & innerHTML

Answer 1

に異なるデータを持つように入力したい<datalist>を使用すると、<select>のように動作しません。 value属性は常に表示され、デフォルトでは変更できません。 この答えは、あなたがする必要がある場合は、別のテキストを表示する方法を示しています - それは、JavaScriptでそれをdata-属性を使用し、処理から構成されています

Show datalist labels but submit the actual value

Answer 2

私はあなたの正確な質問に答えることはできませんが、すなわち、 "これの理由は何ですか"、私はあなたに言うことができるなぜそれが起こる。

コードを実行しているプログラムの機能（実行しているWebブラウザーのいずれか）の結果として、.innerHTML属性が.innerHTML値と.value値の場合にのみ、option要素の右側に表示されます異なる。ここで

はこの動作を示すフィドルですが、私は例と同じ.innerHTML値と.VALUE値を持つ最初のオプションを変更しました： https://jsfiddle.net/87h3bcwd/

私は重宝することをデータリスト要素に

さらに読書http://www.w3.org/TR/html5/forms.html#the-datalist-element

コード：

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

この質問に答えます