multiple selector ajax request showing error and how to get the selected value from multiple select box?

Question

The following is my code.My work is, based on city, location change.So once I select city one Ajax request will send and location will reset.This location is multiple select box so I can select multiple location.based on this I want to show the branches.Here my problem is when I am changing the city multiple drop down is coming.and when I am printing alert($('#cboLocation option:selected').val()) its only alerting 1st value

PHP code

<?php
     $arrCity = array('Chennai' => 'Chennai',
                         'Delhi'  => 'Delhi',
                         'Noida'  => 'Noida');
       $act     =   formatstring($_POST['act']);        
      switch($act)  
            {
                case "getCommonLocation":
                    $dbConn       = setDbConn();
                    $strCityName  = $_POST['CityName'];             
                    $strSQL = "SELECT distinct locality 
                                 FROM mp_new_project 
                                WHERE city = '".$strCityName."' ORDER BY locality ASC";         



                    $stmt = $dbConn->prepare($strSQL);
                    $stmt->execute();
                   // $stmt->bind_result($LocationId, $Location);
                   $stmt->bind_result($Location);

                    while($stmt->fetch())
                     //$arrLocations[] = array($LocationId, $Location);;   
                       $arrLocations[] = array($Location);              

                     for($i=0;$i<count($arrLocations);$i++)
                      $strOptionsList .= "<option value='".$arrLocations[$i][0]."'>".$arrLocations[$i][0]."</option>";  

                    $stmt->close();
                    $dbConn->close();

                    print "<option value='all'>All</option>".$strOptionsList;
                    exit();
                break;

            }

    ?>

Javascript

 <script type="text/javascript" src="scripts/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="scripts/jquery-ui-1.8.13.custom.min.js"></script>
    <script type="text/javascript" src="scripts/ui.dropdownchecklist-1.4-min.js"></script>
    <script type="text/javascript">
     function chnageToUP()
        {
         //  var selLoc =  $('#cboLocation option:selected').text();
          alert($('#cboLocation option:selected').val());
          return false;
        }
        function getCommonLocationForCities()
        {
        url         = 'testing1.php';
        strCityName =  $('#cboCity').val();
        //chnageToUP();

        $.post(
            url,
            {
                "act"       : "getCommonLocation",
                "CityName"  : strCityName
            },
            function(responseText){ 
                $('#cboLocation').val("");
                $('#cboLocation').html(responseText);
                $("#cboLocation").dropdownchecklist({firstItemChecksAll: true, 
                                                     maxDropHeight: 100,
                                                     onComplete: function(selector)
                                                     {
                                                        chnageToUP();
                                                      }});  
                },
            "html"
        );      
       }
    </script>

HTML Code

<table style="margin-left:50px;" cellpadding="3" cellspacing="1" border="0" >
<tr>
     <td><b>City</b></td>
     <td><select name="cboCity" id="cboCity" onchange="getCommonLocationForCities()">
               <option  value="">City</option>
                <?php 
                   foreach($arrCity as $item)
                   {
                      print  "<option value='".$item."'>".$item."</option>";
                   }
                  ?>
       </select></td>
</tr>
<tr>
      <td><b>Location</b></td>
      <td> 
        <select name="cboLocation" id="cboLocation" class="select_142" multiple="multiple">   
         <option value='location'>Location</option>         
        </select>
      </td>
</tr>  
</table>

following is the link http://vignesh.gvignesh.org/dropdown/

Answer 1

use map to get the checked values in an array....

try this

 function chnageToUP()
 {
     var tempArray="";
     tempArray=$('#cboLocation :checked').map( function() { return this.value; });
     console.log(tempArray);
     return false;
 }

Answer 2

alert() is not such a good debugging method, use console.log() instead. Requires you to have Firebug or Google Chrome though to see the contents.