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中显示不同的数据location_id

Answer 1

虽然我无法回答您的确切问题，但是。＆＃34;这是什么原因＆＃34;，我可以告诉你为什么它会发生。

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

这是一个显示此实际操作的小提琴，我已将第一个选项更改为具有相同的.innerHTML值和.value值作为示例：https://jsfiddle.net/87h3bcwd/

进一步阅读我发现在回答这个问题时有用的Datalist元素：http://www.w3.org/TR/html5/forms.html#the-datalist-element

代码：

＆＃13;

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

＆＃13;

Answer 2

使用<datalist>并不像<select>那样有效。它始终显示value属性，并且默认情况下不允许您更改它。此答案显示了如何在需要时显示不同的文本 - 它包含使用data-属性并使用JavaScript处理它：

Show datalist labels but submit the actual value

Datalist奇怪的行为

2 个答案: