jQuery ajax select下拉列表适用于FF和chrome，但不适用于IE 7-9

Question

I know this has been asked so many times by now you all are probably sick of it. I'm just stuck and have already spent about 4 hours on this. I've read through many suggestions already about the

    cache:false, 

option and adding certain "content-types", but when I do this, it no longer works in any browser.

I followed the tutorial as found here: http://www.x-developer.com/php-scripts/loading-drop-downs-with-ajax-php-and-fetching-values-from-database-without-refreshing-the-page

and I modified it of course to my needs, mostly just the mysql and identifiers.

This is what I have in my head section:

    <script type="text/javascript">
    function get_cities(country)
    {

    $.ajax({
    type: "POST",
    url: "/cities.php", 
    cache: false,
    beforeSend: function () {
    $("#state").html("<option>Loading ...</option>");
    },
    data: "country="+country,
    success: function(msg){
    $("#state").html(msg);

    }
    });
    } 
    </script>

In IE, it gets to the Loading.... part, and does nothing, it doesn't populate the option field as it does in Chrome and FF.

Do you see anything in the tutorial that he may have left out that is crucial for the operation in IE?

Thanks,

Answer 1

Try setting the data object as a key value pair..

Instead of

data: "country="+country,

try

data: { "country" : country },

Answer 2

assuming your $("#state") is already a dropdown list.

in cities.php , you'll need to remove the <select> tag.

<?php
// Code for cities.php
$country_id = $_REQUEST['country_id'];

$sql_city = "SELECT * FROM CITY WHERE country_id = '".$country_id."'";
$result_city = mysql_query($sql_city);

// REMOVE THIS LINE
//echo "<select name='city'>";

while($row_city = mysql_fetch_array($result_city))
{
echo "<option value='".$row_city['id']."'>".$row_city['city']."</option>";
}

// AND REMOVE THIS LINE  
// echo "</select>";

?>