Question

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 dropdown…

        <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….

Answer 1

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);
    });
});