如何解决在点击下拉列表项不起作用-jQuery
我有这个仅部分起作用的简单JS和Jquery代码段。自动完成下拉列表可以工作，但是应该在单击自动完成项目时执行的jquery位没有反应（即，在函数内部有未执行的警报）。我不是JS方面的专家，而且我还是自学成才的，因此下面的代码可能有点混乱。如果有人愿意“整理一下”以便它干净并能正常工作，我将不胜感激。
脚本：
$(document).ready(function(){
var startyear_select = document.getElementById("startyear")
var length_select = document.getElementById("length")
var addressform_select = document.getElementById("addressform");
length_select.onchange = function formnumber(){
startyear = startyear_select.value;
length = length_select.value;
startyear = Number(startyear);
var optionHTML = '';
var optionHTML1 = '';
var optionHTML2 = '';
var optionHTMLtotal = '<h4> In the boxes below,provide your all acccommodation addresses: </h4> <br><table> <tr> <th>Postcode</th> <th> Address </th> <th> Move in year </th> </tr>'
for (i = 0; i<=length-1; i++){
optionHTML = '<tr> <td> <div class="autocomplete postcode"> <input required id=postcode'+i+' type="text" placeholder="Postcode"> </div> </td>';
optionHTML1=' <td> <select class="form-control address" style="width: 400px" id=address'+i +' > </select> </td> ';
optionHTML2 =' <td> <input id=year'+i +' name="year" required type="text" value='+Number(startyear+i)+' readonly> </div> <td>';
optionHTMLtotal +=optionHTML+optionHTML1+optionHTML2
}
addressform_select.innerHTML =optionHTMLtotal+' <input name="length" type = "hidden" id="length" required type="text" value='+length+'> <input type="submit" value="Submit!">';
for (i = 0; i<=length-1; i++){
autocomplete(document.getElementById('postcode'+i+''),postcodes.postcodes);
}
$('.autocomplete-items').children().on('click',function(){ alert("hello")
var postcode = $('.postcode');
var address = $('.address');
post = postcode.value;
fetch('/auth/address/' + post).then(function(response) {
response.json().then(function(data) {
var optionHTML = '';
for (var ads of data.addresses) {
optionHTML += '<option value="' + ads.address + '">' + ads.address + '</option>';
}
address.innerHTML = optionHTML;
})
})
})
}
})
此脚本使用的是JS内置的自动完成功能，可在此处https://www.w3schools.com/howto/howto_js_autocomplete.asp
使用HTML：
<head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/autocomplete.css') }}">
</head>
<body>
<form method="POST" >
<div class="row">
<div class="col-md-4">
{{ wtf.quick_form(lenform) }}
</div> </div>
</form>
<div>
<form id=addressform autocomplete="off" method="POST"></div>
<script src= "{{ url_for('static',filename='js/autocomplete.js') }}"> </script>
<script src= "{{ url_for('static',filename='js/autocomplete2.js') }}"> </script>
<script>
var postcodes = JSON.parse('{{ postcodes | tojson | safe}}');
</script>
</body>
自动完成邮政编码输入的结构如下：
<div class='autocomplete postcode'>
<input required id='postcode0'type='text'>
<div class='autocomplete-items'>
<div> 1 </div> <div> 2 </div>
</div> </div>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。