数据列表是否允许显示文本?如何获取文本

Question

我有一个由两部分组成的问题与<datalist>标记有关。首先，虽然这在Chrome中有效，但以下内容有效吗？

<datalist id="key1_list">
<option value="myval1">Disp 1</option>
<option value="myval2">Disp 2</option>
<option value="myval3">Disp 3</option>
</datalist>

如果是，如何从<option>标签中获取选定的显示文本？在Chrome中，该值是主文本，Disp 1列在下面。有人知道(在Jquery中(获得text()的方法吗，因为所选选项上似乎没有列出selected标志。

Answer 1

考虑使用input事件。参见示例：

$(function() {
$("#myKey_list").on("input", function(event) {
var val = $(this).val();
console.log("Input: " + val);
var opt = $("#key1_list option[value='" + val + "']");
console.log("Option: " + opt.text());
$(this).val(opt.text());
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="myKey_list">Choose from this list:</label>
<input list="key1_list" id="myKey_list" name="myBrowser" />
<datalist id="key1_list">
<option value="myval1">Disp 1</option>
<option value="myval2">Disp 2</option>
<option value="myval3">Disp 3</option>
</datalist>

如点击HTML5数据列表选项时执行操作所述

由于缺少可用于<datalist>元素的事件，除了观看输入的事件(change、input等(之外，无法从建议中进行选择。

当我们识别input时，我们可以根据Option更改值。