数据主义者的怪异行为

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>

当您为这两个打开下拉菜单时，您将注意到inputfor patient showvalue&innerhtmlboth和inverted（单击它时，在input字段中输入值）。在Stateinput中，它只是简单地显示状态

这些不同行为的原因是什么？我希望输入仅显示选项的innerhtml像状态输入和在值&innerhtml中有不同的数据

Answer 1

但我不能回答你的确切问题。“这是什么原因”，我可以告诉你为什么会发生这种情况。

由于运行代码的程序的预期功能（无论您运行的是哪种web浏览器），只有当.innerhtml值和.value值不同时，.innerhtml属性才显示在选项元素的右侧。

下面是一个fiddle显示了这一点，我已经将第一个选项更改为具有相同的。innerhtml值和。value值，例如:https://jsfiddle.net/87h3bcwd/

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