如何使用纯JS获取数据列表中所选项目的值？

Question

我有一个数据列表，如下所示：

<input data-row-id="1" id="assignee[1]" name="assignment[1][assignee]" class="assignee" list="transcribers" autocomplete="off" value="" onchange="showEditing(this);" data-id-proofinglevel="1" data-transcriber-id="1361">
<datalist id="transcribers">
    <option value="" data-id="0" data-id-proofinglevel=""></option>
    <option value="Amy" data-id="674" data-id-proofinglevel="1"></option>
    <option value="Jack" data-id="113" data-id-proofinglevel="2"></option>
</datalist>

在我的代码的另一部分中，我需要使用PHP或原始JavaScript获取匹配数据ID的data-id-proofing级别。 我对如何做到这一点一无所知。

我尝试使用此方法来获取校对级别：

let proofingLevel = document.getElementById('assignee[' + rowid + ']').getAttribute('data-id-proofinglevel');

但却输入了错误的数字。 如果我尝试

let list = document.getElementById('transcribers');
let proofingLevel = list.options[list.selectedIndex].getAttribute('data-id-proofinglevel');`

我不确定。

TIA。

Answer 1

datalist元素没有selectedIndex属性。

据我所知，您可以从input获取值，然后找到具有该值的option ，如下所示：

 function showEditing(input) { // Get the value from the input var value = input.value; // Get the matching `option` element from the `datalist` (which is // available via `input.list`) var option = Array.prototype.find.call(input.list.options, function(option) { return option.value === value; }); // Get its `data-id` attribute value console.log(option.getAttribute("data-id")); } 

 <input data-row-id="1" id="assignee[1]" name="assignment[1][assignee]" class="assignee" list="transcribers" autocomplete="off" value="" onchange="showEditing(this);" data-id-proofinglevel="1" data-transcriber-id="1361"> <datalist id="transcribers"> <option value="" data-id="0" data-id-proofinglevel=""></option> <option value="Amy" data-id="674" data-id-proofinglevel="1"></option> <option value="Jack" data-id="113" data-id-proofinglevel="2"></option> </datalist> 

---

不过请注意安迪的观点 。

Answer 2

使用javascript获取数据列表值

function showEditing(input) {
  var datalist = "";
  var list = document.getElementById('transcribers').children;
  for(var i = 0; i<list.length; i++){
    var data = list[i];
    datalist = data.getAttribute("data-id");
    console.log(datalist);
  }
}