数据人是否允许显示文本，你是如何得到的？

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>

​

正如Perform action when clicking HTML5 datalist option所提到的

由于缺少可供<datalist>元素使用的事件，因此除了查看输入的事件(change、input等)之外，没有其他方法可以从建议中获得选择。

当我们识别一个input时，我们可以根据该选项更改值。