Restaurant Filter

by ChrisStanyon

HTML

<select name="Place" size="3" style="width:450px" id="Place">
<option value="114">Atlanta, Georgia</option>
<option value="120">Baltimore, Maryland</option>
<option value="116">Boston, Massachusetts</option>
<option value="126">Cambridge, Massachusetts</option>
<option value="113">Chicago, Illinois</option>
<option value="123">Cleveland, Ohio</option>
<option value="107">Dallas, Texas</option>
</select>

<select name="Alpha" size="3" style="width:450px" id="Alpha">
<option value="A" data-image-src="../Images/Buttons/A.png">A</option>
<option value="B" data-image-src="../Images/Buttons/B.png">B</option>
<option value="C" data-image-src="../Images/Buttons/C.png">C</option>
<option value="D" data-image-src="../Images/Buttons/D.png">D</option>
<option value="E" data-image-src="../Images/Buttons/E.png">E</option>
</select>



<div id="response">This is the response</div>

JavaScript

$('#Place, #Alpha').change(function() {
    //get the values
    place = ($('#Place').val());
    alpha = ($('#Alpha').val());
    
    //if both values are set, fire the ajax call
    if (place && alpha) {
        //test data for ajax request
        data = "{'Letter': " + alpha + ", 'Cid': " + place + "}";
        
        $.ajax({
            type: "POST",	
            url: "/echo/html/",
            data: {"html": data},
            success: function (html) {
                 $("#response").html(html);
			}
        });
    }
});