javascript - How to pass the li tag id via AJAX when clicking the li item? -

i want pass id value show city function on click of li tag values any relevant method accepted

<script type = "text/javascript" >   function showcity(str) {     if (str == "") {       document.getelementbyid("city").innerhtml = "";       return;     } else {       if (window.xmlhttprequest) {         // code ie7+, firefox, chrome, opera, safari         xmlhttp = new xmlhttprequest();       } else {         // code ie6, ie5         xmlhttp = new activexobject("microsoft.xmlhttp");       }       xmlhttp.onreadystatechange = function() {         if (xmlhttp.readystate == 4 && xmlhttp.status == 200) {           document.getelementbyid("city").innerhtml = xmlhttp.responsetext;         }       }        xmlhttp.open("get", "city.php?q=" + str, true);       xmlhttp.send();      }   }  </script>   <div id="menu">   <ol id="test">      <?php $stat=m ysql_query( "select * `tms_state`"); while (($st=m ysql_fetch_array($stat))) { ?>      <li onclick="showcity('this.value')">       <?php echo "<option value='" . $st[ 'id'] . "'>" . $st[ 'name'] . "</option>";?>     </li>      <?php } ?>    </ol>  </div> 

i want pass id value show city function on click of li tag values.

<div id="menu">     <ol id="test">      <?php         $stat=m ysql_query( "select * `tms_state`");        while (($st=m ysql_fetch_array($stat))) { ?>        <li onclick="showcity('<?php echo $st[ 'id'] ?>')">           <?php echo "$st[ 'id']";?>        </li>      <?php } ?>       </ol>  </div>