Css不适用于第二和第二第三个使用jquery / javascript填充的组合框

Question

我有3个链式组合框，它们正在工作和填充。但css对第2和第3个组合框不起作用。

需要你的帮助。我尝试将css文件放在findCuisine.php和findMenuItem.php中，但无法使其正常工作。

主页上的

组合框

<link rel="stylesheet" href="docsupport/style.css">
<link rel="stylesheet" href="docsupport/chosen.css">
<link rel="stylesheet" href="css/bootstrap.min.css">

<table width="60%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="150">Restaurant :</td>
    <td  width="150">
    <select name="country" onChange="getState(this.value)" class="chosen-select" style=" width: 312px; text-align: left;" tabindex="2">
            <option>Select A Restaurant...</option>
        <?php
        include ('inc/db.php');
        $q_all_categories = mysql_query("SELECT * from restaurants where status = 1 order by id asc");
        while ($all_categories = mysql_fetch_array($q_all_categories)) {
            $category_id = $all_categories['id'];
            $categories_name = $all_categories['ename'];

            print   "<option style='text-align:left;' value='$category_id'>$categories_name</option>";
        }
        ?>
        </select>
    <hr style="margin-top: 5px; margin-bottom: 5px;">
    </td>
  </tr>

  <tr style="">
    <td>Cuisine :</td>
    <td ><div id="statediv">
    <select name="state" class="chosen-select" style=" width: 312px; text-align: left;" tabindex="2">
    <option>Select Restaurant First</option>
    </select>
    <hr style="margin-top: 5px; margin-bottom: 5px;">
    </div></td>
  </tr>

  <tr style="">
    <td>Menu Item :</td>
    <td ><div id="citydiv">
    <select name="city" class="chosen-select" style=" width: 312px; text-align: left;" tabindex="2">
    <option>Select Cuisine First</option>
    </select>
    <hr style="margin-top: 5px; margin-bottom: 5px;">
    </div></td>
  </tr>
</table>

  <script src="docsupport/chosen.jquery.js" type="text/javascript"></script>
  <script type="text/javascript">
    var config = {
      '.chosen-select'           : {},
      '.chosen-select-deselect'  : {allow_single_deselect:true},
      '.chosen-select-no-single' : {disable_search_threshold:10},
      '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
      '.chosen-select-width'     : {width:"95%"}
    }
    for (var selector in config) {
      $(selector).chosen(config[selector]);
    }
  </script>

findCuisine.php或findMenuItem.php

上的组合框

<?php $country=intval($_GET['country']);
include ('inc/db.php');
$query = "select * from cuisines where status = 1";
$result     =   mysql_query($query);
?>
<select name="cuisine" onchange="getCity(<?=$country?>,this.value)" class="chosen-select" style=" width: 312px; text-align: left;" tabindex="2">
<option>Select Cuisine</option>
<?php
while($row=mysql_fetch_array($result)) {
    $query1="
            select * from rest_cuisines
            where m_id = '$country'
            and c_id = '".$row['id']."'
";
$result1    =   mysql_query($query1);
while($rows=mysql_fetch_array($result1)) {
?>
<option value="<?php echo $row['id']; ?>"><?php echo $row['ename']; ?></option>
<?php } } ?>
</select>

的Javascript

function getXMLHTTP() {
        var xmlhttp=false;  
        try{
            xmlhttp=new XMLHttpRequest();
        }
        catch(e)    {       
            try{            
                xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e){
                try{
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch(e1){
                    xmlhttp=false;
                }
            }
        }

        return xmlhttp;
    }

    function getState(countryId) {      

        var strURL="findCuisine.php?country="+countryId;
        var req = getXMLHTTP();

        if (req) {

            req.onreadystatechange = function() {
                if (req.readyState == 4) {
                    // only if "OK"
                    if (req.status == 200) {                        
                        document.getElementById('statediv').innerHTML=req.responseText;                     
                    } else {
                        alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                    }
                }               
            }           
            req.open("GET", strURL, true);
            req.send(null);
        }       
    }
    function getCity(countryId,stateId) {       
        var strURL="findMenuItem.php?country="+countryId+"&state="+stateId;
        var req = getXMLHTTP();

        if (req) {

            req.onreadystatechange = function() {
                if (req.readyState == 4) {
                    // only if "OK"
                    if (req.status == 200) {                        
                        document.getElementById('citydiv').innerHTML=req.responseText;                      
                    } else {
                        alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                    }
                }               
            }           
            req.open("GET", strURL, true);
            req.send(null);
        }

    }