Datalist奇怪的行为

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两者并反转(点击它时输入输入字段内的值).在国家,input它只是简单地显示状态

这些不同行为的原因是什么？我想输入只显示innerHTML的option样态input,并在不同的数据value:innerHTML

Answer 1

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

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

这是一个显示此操作的小提琴，我已更改第一个选项以具有相同的 .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>