数据列表奇怪的行为

Question

这里有两个不同的 datalist 一个 patient filenumber 另一个

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

当您打开两者的下拉菜单时，您会注意到 input 患者显示 value & innerHTML 两者和倒置（单击它会在输入字段中输入值）。在 State input 中，它只是简单地显示 state

这些不同行为的原因是什么？我想输入仅显示 option 的 innerHTML 就像状态 input 并且在 value 和 innerHTML

中有不同的数据

Answer 1

使用 <datalist> 与 <select> 不同。它始终显示 value 属性，默认情况下不允许您更改它。 This answer显示了如何在需要时显示不同的文本 - 它包括使用 data- 属性并使用 JavaScript:

对其进行处理

Answer 2

虽然我无法回答您的确切问题，但 I.E. "What is the reason of this"，我可以告诉你为什么它会发生。

作为程序预期功能的结果运行代码（无论您使用的是哪个 Web 浏览器运行）只有在以下情况下，.innerHTML 属性才会显示在选项元素的右侧.innerHTML 值和 .value 值不同。

这里有一个 fiddle 展示了这个动作，我已经将第一个选项更改为具有相同的 .innerHTML 值和 .value 值作为示例：https://jsfiddle.net/87h3bcwd/

进一步阅读我发现对回答这个问题很有用的 Datalist 元素：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>

数据列表奇怪的行为

Datalist weird behaviour

html

input

html-datalist