есть такой пример списка городов
http://jsfiddle.net/4fbej3Lp/10/
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head><body>
Введите город прибытия:
<input type="text" name="opt"></input> <br>
<select id="arrivalPoint"></select>
<script>
var val="Москва";
var data = {q: val};
// This line taken from J50Npi.min.js (within this repo)
var J50Npi={currentScript:null,getJSON:function(b,d,h){var g=b+(b.indexOf("?")+1?"&":"?");var c=document.getElementsByTagName("head")[0];var a=document.createElement("script");var f=[];var e="";this.success=h;d.callback="J50Npi.success";for(e in d){f.push(e+"="+encodeURIComponent(d[e]))}g+=f.join("&");a.type="text/javascript";a.src=g;if(this.currentScript){c.removeChild(currentScript)}c.appendChild(a)},success:null};
var url = 'http://public.services.dellin.ru/autocomplete/?answerType=jsonp&callback=arrivalPointRender';
// We need a function callback to be executed after the response is received
var arrivalPointRender = function(data){
var html = '', selected = false;
for(var i = 0; i < data.length; i++){
if (data[i].inPrice==1){
html += '<option value="'+data[i].code+'"'+(selected?'':' selected')+'>'+data[i].label+" "+data[i].uString+'</option>'
selected = false }
}
document.getElementById('arrivalPoint').innerHTML = html;
};
J50Npi.getJSON(url, data, arrivalPointRender);
var inp = document.querySelector('[name="opt"]');
inp.addEventListener("input", function() {
val=this.value;
data = {q: val};
J50Npi.getJSON(url, data, arrivalPointRender);
})
document.getElementById('arrivalPoint').addEventListener("change", function() {
alert("город поменялся");
})
</script>
</body>
</html>
нужно чтобы алерт появлялся, когда содержимое селекта меняется (а меняется он если менять input), а он появляется только если по нему мышкой кликнуть.