Question

好的，我有以下HTML源代码：

<form method="post" action="/" id="search">
  <input list="animals" name="animal">
    <datalist id="animals">
      <option label="Alaskan Malamute" data-id="d8c" value="Dog">
      <option label="Siberian Husky" data-id="w30" value="Dog">
      <option label="Aegean" data-id="rxx" value="Cat">
    </datalist>
</form>

和JS

function doKeyUp(e) {
  if (e.preventDefault) e.preventDefault();

  if(e.keyCode == 37 || e.keyCode == 38 || e.keyCode == 39 || e.keyCode == 40 ) {return;}

  var input = document.getElementById("animal");
  var search_after = input.value.trim();
  var form = document.getElementsByTagName("form")[0];

  var datalist = document.getElementsByTagName('datalist')[0];

  if (search_after.length >= 2) {

    if (e.keyCode == 13 && search_after.length >= 3) {
      var id = "value of data-id";
      // How to obtain and submit the `data-id` of the selected option.
      document.getElementById("search").submit();
    }
  }
}  // dokeyup



document.addEventListener("DOMContentLoaded", function(event) {
  document.getElementById("search").onsubmit = function (e) {
    console.log("SUBMIT");
    return false;
  };

  document.addEventListener( "keyup", doKeyUp, true);
});

当用户选择一个选项时，如何获得所选data-id的{{1}} - 这是我想要在服务器端提交和处理的实际数据。

这是一个我试图自己编写所有内容的项目，这次没有jQuery。

知道我可以做<option>，但无法弄清楚我是如何获得所选索引的。

3月4日更新：必须再问一次，没有人对我有任何提示吗？

仍然没有想到这一点，并且真的没有想法...... 在表单提交之前，我最后一次尝试停止了：

console.log(datalist.options[1]);

是否有可能获得所选选项的选定索引 - 或者我仍然走错路？无论如何，上面的内容在第一个元素处停止。

Answer 1

将此答案视为jquery解决方案..＆amp;抱歉回复晚了。

＆＃13;

$(function(){
    $('#p').click(function(){
        console.log($("#animals option[value='" + $('#someid').val() + "']").attr('data-id'));
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="/" id="search">
  <input list="animals" name="animal" id="someid">
    <datalist id="animals">
      <option label="Alaskan Malamute" data-id="d8c" value="Dog">
      <option label="Siberian Husky" data-id="w30" value="Dog">
      <option label="Aegean" data-id="rxx" value="Cat">
    </datalist>
    <span id="p">Click</span>
</form>

＆＃13;

Answer 2

可以从DOM数据列表对象访问数据列表中所选<选项>的data选项的data-id属性值，就像这样

<input list="animals" id="input-animal" name="animal">
<datalist id="animals">
  <option label="Alaskan Malamute" data-id="d8c" value="Dog">
  <option label="Siberian Husky" data-id="w30" value="Dog">
  <option label="Aegean" data-id="rxx" value="Cat">
</datalist>

 animals.options.namedItem( input-animal.value ).getAttribute('data-id')

namedItem（）是一种从具有指定ID的集合中返回元素的方法。

Answer 3

Russel Newton 使用 namedItem 的解决方案几乎对我有用。这是一个调整后的解决方案，使用选项标签上的 name 属性。（参考：https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/namedItem）

var form = document.getElementById('dataForm');
form.addEventListener('submit', validateform);

function validateform() {
  event.preventDefault();
  var selectedOption = dataListId.options.namedItem(inputId.value);
  if (selectedOption) {
      var selectedId = selectedOption.getAttribute('data-id');
      var result = "Country ID: " + selectedId;
      console.log({selectedId});
  } else {
      var result = "No ID available for value: " + inputId.value;
  }
  document.getElementById('resultID').textContent = result; 
  
  // Can also use : 
  // inputElement = document.getElementById("inputId");
  // listElement = document.getElementById("dataListId");
}

div.resultID {
  color: #85144b;
  font-weight: bold;
  margin-top: 30px;
  margin-left: 20px;
}

<form id="dataForm">
  <input id="inputId" list="dataListId" value="" placeholder="Choose a country">
  <datalist id="dataListId">
            <option data-id="1" name="Country A">Country A</option>
            <option data-id="36" name="Country B">Country B</option>
            <option data-id="59" name="Country C">Country C</option>
        </datalist>
  <button id="submitButton" type="submit">Submit</button>
  <div id="resultID" class="resultID"></div>
</form>

Answer 4

https://kodingkantor.blogspot.co.id/2018/03/get-data-id-in-datalist-option.html

console.log($("#locations option[value='" + $('#location1').val() + "']").attr('data-id'));

Answer 5

没有jQuery！

输入值更改后，输入字段的数据属性将合并：

document.querySelector('#animal').addEventListener('input', (e) => {
  Object.assign(e.target.dataset, document.querySelector('#' + e.target.getAttribute('list') + ' option[value="' + e.target.value + '"]').dataset);
  console.log('dataset of input changed: ', e.target.dataset)
});

<input list="animals" id="animal" data-id="xxx">
<datalist id="animals">
  <option value="Alaskan Malamute"  data-id="123" data-alpha="abc">
  <option value="Siberian Husky"    data-id="456" data-alpha="def">
  <option value="Aegean"            data-id="789" data-alpha="ghi">
</datalist>

获取数据列表中所选选项的数据ID

5 个答案: