html - 数据列表奇怪的行为

Question

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

<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 for patient show value & innerHTML both and inverted(单击它会在输入字段中输入值)。在 State input 中，它只是简单地显示状态

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

Answer 1

虽然我无法回答您的确切问题，但 I.E. “这是什么原因”，我可以告诉你为什么它会发生。

作为运行代码的程序的预期功能(无论您运行的是哪个 Web 浏览器)，仅当 .innerHTML 值和 .value 值不同时，.innerHTML 属性才会显示在选项元素的右侧.

这是一个 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>