Chrome无法正确显示下拉列表

Question

我的代码中有一个依赖下拉框，就像国家/州/城市一样。 当我在第一个下拉列表中选择某个项目时，使用jQuery在连续下拉列表中过滤项目。但是，在第一个下拉列表中的某些选择中，连续下拉列表会获得滚动条，即使它只显示3个项目。

从第一个下拉列表中的所有选择中都不会发生这种情况，但只会选择某些选项。 当我在页面加载后查看chrome中的源代码时，一切似乎都没问题。

这在firefox中运行正常，所以我假设我的代码是正确的或者可能是错误的。

有什么建议吗？

<script>
    $(document).ready(function() {
        $(".mycountry").change(function () {
            var id = $(this).find(":selected").attr("id");
            $(".state").each(function(idx, state) { if ($(state).hasClass(id)) { $(state).show(); } else { $(state).hide(); } });
            });
        });
</script>

<?php 
$countrystring = "";
$statestring = "";
$sql = "SELECT countryid, countryname FROM country_info ORDER BY countryname";
$result = mysql_query($sql, $conn);
while ($ref = mysql_fetch_row($result)) {
       $countryid = $ref[0];
       $countryname = $ref[1];
       $countrystring = $countrystring . "<option class=\"country\"
id=\"$countryname\" value=\"$countryid\">$countryname</option>\n";
       $iisql = "SELECT stateid, statename FROM state_info WHERE countryid=$ref[0]";
       $iiresult = mysql_query($iisql, $conn);
       while ($iiref = mysql_fetch_row($iiresult)) {
               $statename = $iiref[1];
               $stateid = $iiref[0];
               $statestring = $statestring . "<option class=\"$countrystring state\"
value=\"$stateid\">$iiref[1]<br></option>\n";
       }
}
?>
<b class="fsheader">Country:</b><br>
Choose a Country:<br>
<select name="countryid" class="mycountry" id="countryid">
<option value="-1" disabled="" selected>- Select Country -</option>
<?php echo $countrystring ?>
</select>

<?php print("$tdc$tdo\n"); ?>
State:<br>
<b class="fsheader">Choose a State:</b><br>
<select name="stateid" class="mystate" id="stateid">
<option value="-1" disabled="" selected>- Select State -</option>
<?php echo $statestring ?>
</select>