在HTML中查找Datalist中的选定项 [英] Find selected item in Datalist in HTML

问题描述

我有一个datalist，像这样

 < input list =browsers> 
 
< datalist id =browsers> 
< option id =op1value =Internet Explorer> 
< option id =op2value =Firefox> 
< option id =op3value =Chrome> 
< option id =op4value =Opera> 
< option id =op5value =Safari> 
< / datalist> 
  

我正在使用jquery向datalist添加option。现在的问题是我如何找到用户在datalist中选择/点击的选项。我想在用户选择/点击后立即获得选项的ID？

解决方案

您可以添加一个ID到输入字段 - 并监听输入事件。然后，您必须获取要在选择器中使用的输入值以获取选定的选项。

  $（function（）{$（' （'input'，function（）{var opt = $（'option [value =''+ $（this）.val（）+']'）; alert（opt.length？opt .attr（'id'）：'NO OPTION'）;}）;}）;  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js>< / script>< input id ='browserinput'list =browsers>< datalist id =browsers> < option id =op1value =Internet Explorer/> < option id =op2value =Firefox/> < option id =op3value =Chrome/> < option id =op4value =Opera/> < option id =op5value =Safari/>< / datalist>  

I've a datalist something like this

<input list="browsers">

<datalist id="browsers">
  <option id="op1" value="Internet Explorer">
  <option id="op2" value="Firefox">
  <option id="op3" value="Chrome">
  <option id="op4" value="Opera">
  <option id="op5" value="Safari">
</datalist>

I'm adding "option" using jquery to datalist. Now the question is how can i find which option is selected/clicked by the user in datalist. I want to get the id of option as soon as it is is selected/clicked by user?

解决方案

You can add an ID to the input field - and listen for the input event. Then you have to get the value of the input to use in the selector to get the selected option

$(function() {
  $('#browserinput').on('input',function() {
    var opt = $('option[value="'+$(this).val()+'"]');
    alert(opt.length ? opt.attr('id') : 'NO OPTION');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id='browserinput' list="browsers">

<datalist id="browsers">
  <option id="op1" value="Internet Explorer" />
  <option id="op2" value="Firefox" />
  <option id="op3" value="Chrome" />
  <option id="op4" value="Opera" />
  <option id="op5" value="Safari" />
</datalist>

这篇关于在HTML中查找Datalist中的选定项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！