我在 Mozilla Firefox 上开发了我的项目。我没有考虑其他浏览器。此 onSelect 函数在 Chrome 上不起作用。
我有客户名单,想根据输入获取相关名称。当用户单击列出的客户端时,我的函数会填充其他输入。这在 Firefox 中非常有效。
<div class="form-group col-md-6">
<label>Vorname</label>
<input class="form-control" id="vorname" placeholder="Vorname" onSelect='selectClient(this)' list="kunden">
<datalist id="kunden">
<?php
foreach($clients as $client)
{
echo("<option id='{$client["id"]}' value='{$client["id"]}'> $client["vorname"]} {$client["nachname"]} -- {$client["address_ort"]}</option>"); }
?>
</datalist>
</div>
function selectClient(item){
if(!isNaN(item.value)){
isOldClient=true;
oldClientId=item.value;
<?php
echo "var clients_array = ". $js_array . ";\n";
?>
var client=clients_array[item.value-1];
$("#nachname").val(client["nachname"]);
$("#geburtsdatum").val(client["geburtsdatum"]);
$("#vorname").val(client["vorname"]);
$("#telefon").val(client["telefonnummer"]);
$("#strasse").val(client["address_str"]);
$("#hausno").val(client["address_no"]);
$("#plz").val(client["address_plz"]);
$("#ort").val(client["address_ort"]);
}
else{
isOldClient=false;
}
};
这是 mozilla firefox(无法捕获选项列表):https://youtu.be/rnOUudSlBv4
这是 Chrome : https://youtu.be/jE6DM-Gwc4I 希望有人能找到解决方案。 预先感谢您的回答。
最佳答案
您可以尝试这种方式,这可能适用于所有浏览器
$('#vorname').on('input', function () {
console.log('Input has been changed');
selectClient($(this).val()); // call your function
});
尝试这个,如果它是从数据列表中选择的,或者类型, 您可以添加 if notempty/null 条件
$("#vorname").on('change', function () {
var val = this.value;
if($('#kunden').filter(function(){
return this;
}).length) {
// if selected
alert('selected= '+this.value);
}else {
// if typed
alert('new= '+this.value)
}
});
如果您使用此功能,请删除 onSelect,因为它会在 Firefox 中触发两次。
关于javascript - 如何在 Chrome 中触发 onSelect Datalist,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58680367/