上一篇: jQuery：在绑定到表单提交事件时... 下一篇:为什么迭代jQuery对象与.each()不...

jquery – 如何在datalist html5中显示文本,而不是值

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – 如何在datalist html5中显示文本,而不是值，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

<!DOCTYPE html>
<html>
<body>

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">1</option>
  <option value="Firefox">2</option>
  <option value="Chrome">3</option>
  <option value="Opera">4</option>
  <option value="Safari">5</option>
</datalist>
<input type="submit">
</form>

</body>
</html>

http://jsfiddle.net/j7ehtqjd/1/

我附了一个小提琴.请检查.
我想要实现的解决方案是当我点击显示值的下拉列表,但是我想要显示文本1,2,3,4,5.我必须对我的实际问题使用一个json响应.只应该显示文本,并且应该像普通下拉列表那样隐藏该值.这个自动完成功能是必需的,否则我将会使用正常的下拉菜单.

解决方法

编辑,更新

以下摄政

尝试(v3)

HTML

<input id="@R_616_10288@cted" list="browsers" name="browser">
<datalist id="browsers">
    <option data-value="InternetExplorer" value="1"></option>
    <option data-value="Firefox" value="2"></option>
    <option data-value="Chrome" value="3"></option>
    <option data-value="Opera" value="4"></option>
    <option data-value="Safari" value="5"></option>
</datalist>
<input id="submit" type="submit">

$(document).ready(function() {

var data = {}; 
$("#browsers option").each(function(i,el) {  
   data[$(el).data("value")] = $(el).val();
});
// `data` : object of `data-value` : `value`
console.log(data,$("#browsers option").val());


    $('#submit').click(function()
    {
        var value = $('#@R_616_10288@cted').val();
        alert($('#browsers [value="' + value + '"]').data('value'));
    });
});