jQuery : Set value of datalist?

Question

<input list="countries" type = 'text' id='country'>
 <datalist id="countries">
    <option data-value='1' value='India'></option>
    <option data-value='2' value='USA'></option>
    <option data-value='3' value='UK'></option>
 </datalist>

如何使用 jQuery 或 JavaScript 将值动态设置为 India？

Answer 1

实际上，在Datalist中，应该设置的是输入值!

当您从下拉列表中选择一个值时，输入的值将设置为与您选择的值相同!

因此，要动态设置所选值，应该更改您输入的值!

这是一个例子

function clickme(){
    $("#country").val("India");
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="clickme()">click me</button>
<input list="countries" type = 'text' id='country'>
 <datalist id="countries">
    <option data-value='1' value='India'></option>
    <option data-value='2' value='USA'></option>
    <option data-value='3' value='UK'></option>
 </datalist>