# Other Programming > AJAX >  newbie SELECT created from AJAX not firing the onchange

## shall42

I have a web page with multiple dropdown lists. The dropdown list ( in real example will
be coming from database) in this example comes from ajax.

How can I get the the ONCHANGE to fire from a select statement from a drop down list?
And How do I get the value of what was selected?

I have spent hours on this.I want the onchange to fire checkCity and get value in checkCity function.
========


```
<%
''' testGetCity.asp
strcc=request.querystring("cc")
If Len(trim(strcc))=0 THEN strcc="1"
If strcc="1" THEN
   response.write("<select name=""listcity"" idname=""listcity"" ")
   response.write("&nbsp;onchange=""checkCity(this)"">")
   response.write "<option value=""CA_FRESNO"">Fresno</option>"
   response.write "<option value=""CA_LOS_ANGELES"">Los_Angeles</option>"
   response.write "<option value=""CA_SACRAMENTO"">Sacramento</option>"
   response.write("</select>")
END IF
If strcc="2" THEN
   response.write("<select name=""listcity"" idname=""listcity"" ")
   response.write("&nbsp;onchange=""checkCity(this)"">")
   response.write "<option value=""TX_AUSTIN"">Austin</option>"
   response.write "<option value=""TX_DALLAS"">Dallas</option>"
   response.write "<option value=""TX_HOUSTON"">Houston</option>"
   response.write("</select>")
END IF

%>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test_AjaxCity</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>
  <div id="listcity01">California</div>
  <div id="listcity02">Texas</div>
  </div>
  <script type="text/javascript">
function checkCity(what){
  alert("Inside_checkCity option chosen is=");
}
$(document).ready(function()
{
function runRequest(num){
    if (num > 2){
    return;
    }
    if (eval(num) ==1){
       var mssg="testGetCity.asp?cc=1";   
    }
    if (eval(num) ==2){
       var mssg="testGetCity.asp?cc=2";   
    }
    $.ajax
    ({
    type: "POST",
    url: mssg,
    async: false,
    data:  "" ,
    success: function(msg){
         if (eval(num) ==1){
            $("#listcity01").append(msg);
         }   
         if (eval(num) ==2){
            $("#listcity02").append(msg);
         }   
    }
    });
}
var intjs;
for(intjs=1;intjs<3;intjs++){
    runRequest(intjs);
}
});  
  </script>
  
</body>
</html>
```

Suggestions
TIA
shall42

----------


## shall42

I got some good info from Dave ( dsvick ).

SOLVED - here is the results of having multiple select statements on a page
and able to get the value.



```
<%
''' testGetCity.asp
strcc=request.querystring("cc")
If Len(trim(strcc))=0 THEN strcc="1"
If strcc="1" THEN
   response.write("<select name=""AAlistcity"" idname=""listcity"" ")
   response.write("&nbsp;onchange=""checkCity(this)"">")
   response.write "<option value=""CA_FRESNO"">Fresno</option>"
   response.write "<option value=""CA_LOS_ANGELES"">Los_Angeles</option>"
   response.write "<option value=""CA_SACRAMENTO"">Sacramento</option>"
   response.write("</select>")
END IF
If strcc="2" THEN
   response.write("<select name=""BBlistcity"" idname=""listcity"" ")
   response.write("&nbsp;onchange=""checkCity(this)"">")
   response.write "<option value=""TX_AUSTIN"">Austin</option>"
   response.write "<option value=""TX_DALLAS"">Dallas</option>"
   response.write "<option value=""TX_HOUSTON"">Houston</option>"
   response.write("</select>")
END IF
%>
```

Now the other page which calls the page above.
I hope this helps someone else. I spent a lot of time on this.




```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test_AjaxCity</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div>
  <div id="listcity01">California</div>
  <div id="listcity02">Texas</div>
  </div>
  <script type="text/javascript">
$(document).ready(function()
{
$("body").on("change", "#listcity01,#listcity02", function(selected) {
      var strCity
      strCity=$(':selected',this).attr('value');
      alert("A_the selected value is: " + strCity);
});
function runRequest(num){
    if (num > 2){
    return;
    }
    if (eval(num) ==1){
       var mssg="testGetCity.asp?cc=1";   
    }
    if (eval(num) ==2){
       var mssg="testGetCity.asp?cc=2";   
    }
    $.ajax
    ({
    type: "POST",
    url: mssg,
    async: false,
    data:  "" ,
    success: function(msg){
         if (eval(num) ==1){
            $("#listcity01").append(msg);
         }   
         if (eval(num) ==2){
            $("#listcity02").append(msg);
         }   
    }
    });
}
var intjs;
for(intjs=1;intjs<3;intjs++){
    runRequest(intjs);
}
});  
  </script>
  
</body>
</html>
```

----------

