get option value from jquery to php and refresh page

I have a simple dropdown box and jquery to get value from what i selected.

It works fine but i want the selected value to a php variable and after that i need automatically refresh page.

My exact need is when i select a city the below image changes accordingly.

for example if i selected Delhi i get the value to a php variable and i pass it in to mysql to get the image url.

Here is my dro开发者_JAVA技巧pdown...

        <form name="city" action="home.php" method="get">
            <select id="single">
                <option value="Ahmedabad">Ahmedabad</option>
                <option value="Coimbatore">Coimbatore</option>
                <option value="Ludhiana">Ludhiana</option>
                <option value="Delhi ">Delhi </option>
                <option value="Bangalore">Bangalore</option>
                <option value="Chennai">Chennai</option>
                <option value="Mumbai">Mumbai</option>
                <option value="Kochi">Kochi</option>
            </select>
        </form>

Here is my jquery...

<script type="text/JavaScript">
function displayVals() {
  var singleValues = $("#single").val();
  $("p").html(singleValues);
   }
$("select").change(displayVals);
displayVals();

plase help me....

---

To do this with AJAX, you will need a php file (ajax.php for example) to handle the sql request and return the image (server side):

<?php
if (!empty($_GET['city']))
{
    // Query SQL
    echo $image_url;
    exit;
}

Also you need an ajax request in the page (client side):

$("#single").change(function() {
    var city_val = $(this).val();
    $.get("ajax.php?city="+city_val,function(img_src) {
        alert(img_src);
    });
});

---

    <form name="city" action="home.php" method="get">
        <select id="single">
            <option value="Ahmedabad">Ahmedabad</option>
            <option value="Coimbatore">Coimbatore</option>
            <option value="Ludhiana">Ludhiana</option>
            <option value="Delhi ">Delhi </option>
            <option value="Bangalore">Bangalore</option>
            <option value="Chennai">Chennai</option>
            <option value="Mumbai">Mumbai</option>
            <option value="Kochi">Kochi</option>
        </select>

        <input type="hidden" name="imageToShow"  id="imageToShow" value="" />
    </form>

    <script type="text/JavaScript">
        $(document).ready(function() {
        $("select").change(function(){
            var singleValues = $("#single").val();
            $('#imageToShow').val(singleValues);
        });
        form.submit();
        });
    </script>

and in php code

<?php

if(isset($_GET['imageToShow'])){

    //  php code to get image

}