HTML5下拉列表中＜datalist＞元素用jquery动态绑定option数据

在HTML5中，<datalist>元素用于为输入框提供可能的选项。使用jQuery可以动态地向<datalist>添加<option>元素。以下是一个简单的例子：

HTML部分：




<input type="text" list="myDatalist" id="myInput" />
<datalist id="myDatalist"></datalist>

jQuery部分：




$(document).ready(function() {
    var data = ["Option 1", "Option 2", "Option 3"]; // 要绑定的数据数组
 
    var $datalist = $('#myDatalist');
    $.each(data, function(index, item) {
        $datalist.append($('<option></option>').val(item).html(item));
    });
});

在这个例子中，当页面加载完成后，jQuery会遍历数组data，并为每个元素创建一个<option>，然后将其添加到<datalist>中。这样，在用户使用输入框时，就会看到预先定义好的选项。

HTML5下拉列表中＜datalist＞元素用jquery动态绑定option数据

评论已关闭

推荐阅读