选中时如何从 datalist->option 元素中获取 'rel' 值？

Question

我有简单的数据列表：

<datalist id="AddressEcontList">
    <option rel="9605" value="Балчик Левски"></option>
    <option rel="9005" value="Варна Левски"></option>
    <option rel="3012" value="Враца Левски"></option>
    <option rel="4804" value="Девин Васил Левски"></option>
    <option rel="5901" value="Левски"></option>
    <option rel="8900" value="Нова Загора В.Левски"></option>
    <option rel="5806" value="Плевен Васил Левски"></option>
    <option rel="4032" value="Пловдив Васил Левски"></option>
    <option rel="8806" value="Сливен Васил Левски"></option>
    <option rel="1038" value="София Левски"></option>
</datalist>

这是我的输入字段：

<input type="text" class="form-control" list="AddressEcontList" placeholder="demo123" id="AddressEcontOffice">

这是我当前尝试查找选项元素并从中提取 rel 值的代码，但它不起作用

$('#AddressEcontOffice').on('change', function (e) {
  let value = $(this).val();
  let rel = $('#AddressEcontList[value="' + value + '"]').attr('rel');
});

我得到了 undefined，当我只尝试 $('#AddressEcontList[value="' + value + '"]') 时，我得到了这个

n.fn.init [prevObject: n.fn.init(1), context: document, selector: "#AddressEcontList[value="Левски"]"]

Answer 1

您的问题是由选择器引起的。 value 属性在子 option 元素上，而不是 #AddresEcontList 本身，因此您需要用 space 分隔它们。试试这个：

$('#AddressEcontOffice').on('change', function(e) {
  let value = $(this).val();
  let rel = $('#AddressEcontList option[value="' + value + '"]').attr('rel');
  console.log(value);
  console.log(rel);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="form-control" list="AddressEcontList" placeholder="demo123" id="AddressEcontOffice">
<datalist id="AddressEcontList">
    <option rel="9605" value="Балчик Левски"></option>
    <option rel="9005" value="Варна Левски"></option>
    <option rel="3012" value="Враца Левски"></option>
    <option rel="4804" value="Девин Васил Левски"></option>
    <option rel="5901" value="Левски"></option>
    <option rel="8900" value="Нова Загора В.Левски"></option>
    <option rel="5806" value="Плевен Васил Левски"></option>
    <option rel="4032" value="Пловдив Васил Левски"></option>
    <option rel="8806" value="Сливен Васил Левски"></option>
    <option rel="1038" value="София Левски"></option>
</datalist>

选中时如何从 datalist->option 元素中获取 'rel' 值？

How to get 'rel' value from datalist->option element when selected?

javascript

jquery

html-datalist