html列表的列选择事件,html5 datalist 选中option选项后的触发事件

使用input + datalist 实现自动补全功能，其中datalist中的内容是根据input输入的内容动态变换的，代码如下

function inputSelect(){

var input_select=$("#input").val();

var option_length=$("option").length;

var option_id='';

for(var i=0;i

var option_value=$("option").eq(i).attr('data-value');

if(input_select==option_value){

option_id=$("option").eq(i).attr('data-id');

break;

}

}

console.log(input_select,option_length,option_id);

};

html5中datalist, 对选择的option选项获取对应的属性值.

function inputSelect(){

var input_select = $("#input").val();

var after_value = input_select.split(".");

var new_value = after_value[0] + "." + after_value[1] + "." + after_value[2] + ".xxx";

$("#input").val(new_value);

var option_length = $("#netsegments").find("option").length;

var data_id = '';

var firstIp = 1;

var lastIp = 255;

for(var i = 0; i < option_length; i++){

var option_value = $("option").eq(i).attr('data-value');

if(input_select == option_value){

data_id = $("option").eq(i).attr('data-id');

firstIp = $("option").eq(i).attr('firstIp');

lastIp = $("option").eq(i).attr('lastIp');

break;

}

}

console.log("input_select:" + input_select + ",option_length:" + option_length);

console.log("data_id:" + data_id + ",firstIp:" + firstIp + ",lastIp:" + lastIp);

};

测试结果如下:

当选择第二个选项时候, console打印出结果:

input_select:10.0.23.64~127,option_length:3

data_id:2,firstIp:63,lastIp:127

到此这篇关于html5 datalist 选中option选项后的触发事件的文章就介绍到这了,更多相关html5 datalist 选中option 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！