Problem Only in Chrome and Safari

Problem Only in Chrome and Safari

Hello,

I'm using the following code.  It works fine on FF, IE, and Opera, but it fails in Safari and Chrome.  Safari does nothing when the drop down is clicked, and the drop down is always one click behind in Chrome.

Here's the JavaScript.

  1. $(document).ready(function(){
        $('select#byCounty').click(
                function()
                    {
                        // Empty out the div if you already have gotten a listing
                        $('div#CourtListings').empty();
                       
                        //Get the county from the dropdown.
                        var $getCounty = document.getElementById("byCounty").value;
                       
                        // Get the XML data and display it in the div.
                        $.ajax({
                        type: "GET",
                        cache: false,
                        url: "CourtData/court_data.xml",
                        //full URL gives some results in Chrome but buggy
                        //url: "http://sandbox.courtnet.org/xml/CourtData/court_data.xml",
                        dataType: "xml",
                        success: function(xml) {
                            $(xml).find('ROW').each(function(){
                            var $COUNTY = $(this).find('COUNTY').text();
                   
                            // If COUNTY matches the county from the dropdown list,
                            // the address will be displayed
                           
                            if ($getCounty == $COUNTY)
                                {
                                var COURT_NAME = $(this).find('COURT_NAME').text();
                                $('<div class="courtNames" id="link_'+COURT_NAME+'"></div>').html(COURT_NAME+'<br />').appendTo('#CourtListings');
       
                                var ADDRESS_LINE = $(this).find('ADDRESS_LINE').text();
                                $('<div class="courtNames" id="link_'+ADDRESS_LINE+'"></div>').html(ADDRESS_LINE+'<br /><br />').appendTo('#CourtListings');
                                 }
                        });
                    }   
                    });
            });


    });






































Here's the HTML (with the dropdown list shortened for readability).
  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript" src="jquery-1.5.2.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Reading XML with jQuery</title>
        <script type="text/javascript" src="xmlTest2.js"></script>
     
    </head>

    <body>
             <h1>Reading XML with jQuery</h1>
            

    <p id="counties"><select name="county" size="1" id="byCounty">

    <option value="" selected="selected" id="startCountyOver">Choose County</option>
    <option value="Allegany">Allegany </option>
    <option value="Bronx">Bronx </option>

    <option value="Wyoming">Wyoming </option>
    <option value="Yates">Yates </option>
    </select>

    </p>

    <!-- DO NOT DELETE THIS EMPTY DIV!  THE FORM WILL NOT WORK WITHOUT IT  -->
        <div id="CourtListings">
         </div>
    </body>
    </html>
































Does anyone know why it fails (and fails differently) just in Safari and Chrome?