如何使用 jQuery 在数据列表中获取选定的属性值

Question

$("input[name=TypeList]").focusout(function(){
    alert($(this).attr('data-value'));
});

<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input  id="s" name = "TypeList" list = "TypeList" placeholder = "Select Type"/>
<datalist id = "TypeList">
   <option  data="1" data-value="1">Internet Explore1</option>
   <option data-value="4">Internet Explore4</option>
   <option data-value="3">Internet Explore3</option>
   <option data-value="2">Internet Explore2</option>
</datalist>
</body>

Answer 1

$(this).val() 应该为您完成这项工作..:)

$("input[name=TypeList]").focusout(function(){
    alert($(this).val());
});

<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input  id="s" name = "TypeList" list = "TypeList" placeholder = "Select Type"/>
<datalist id = "TypeList">
   <option  data="1" data-value="1">Internet Explore1</option>
   <option data-value="4">Internet Explore4</option>
   <option data-value="3">Internet Explore3</option>
   <option data-value="2">Internet Explore2</option>
</datalist>
</body>

Answer 2

您可以根据内容使用jQuery :contains() pseudo-class selector到select。

$("input[name=TypeList]").focusout(function(){
    alert($(`#TypeList option:contains('${this.value}')`).data('value'));
});

<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input  id="s" name = "TypeList" list = "TypeList" placeholder = "Select Type"/>
<datalist id = "TypeList">
   <option  data="1" data-value="1">Internet Explore1</option>
   <option data-value="4">Internet Explore4</option>
   <option data-value="3">Internet Explore3</option>
   <option data-value="2">Internet Explore2</option>
</datalist>
</body>

对于完全匹配，您必须使用 filter() 方法。

$("input[name=TypeList]").focusout(function() {
  var val = this.value;
  alert($('#TypeList option').filter(function() {
    return val === this.value;
  }).data('value'));
});

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <input id="s" name="TypeList" list="TypeList" placeholder="Select Type" />
  <datalist id="TypeList">
   <option  data="1" data-value="1">Internet Explore1</option>
   <option data-value="4">Internet Explore4</option>
   <option data-value="3">Internet Explore3</option>
   <option data-value="2">Internet Explore2</option>
</datalist>
</body>

仅供参考： 要获取 data-* 值，请使用 jQuery data() 方法。

Answer 3

还有另一种方法可以通过对输入值的变化事件做出反应来做到这一点：

$(function(){
    $('#s').change(function(){
        console.log($("#TypeList option[value='" + $('#s').val() + "']").attr('id'));
    });
});

Answer 4

不确定是否有比这更简单的解决方案。试试下面。

$("input[name=TypeList]").focusout(function(){
     console.log($([].slice.call($(this)[0].list.children).filter((e) => {     
     
     return e.value === $(this).val();
     })).attr('data-value'));
});

<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input  id="s" name = "TypeList" list = "TypeList" placeholder = "Select Type"/>
<datalist id = "TypeList">
   <option  data="1" data-value="1">Internet Explore1</option>
   <option data-value="4">Internet Explore4</option>
   <option data-value="3">Internet Explore3</option>
   <option data-value="2">Internet Explore2</option>
</datalist>
</body>

如何使用 jQuery 在数据列表中获取选定的属性值

how to get selected attribute value in datalist using jQuery

html

javascript

jquery

datalist