样式成功功能ajax

Heeeeelp! :)

I have a problem with my code. I want to make a dropdown filter using ajax, php & json. The first dropdown menu (build year for car) is loaded true php. In the second dropdown menu you have to choose the brand of the car. This is done true ajax request and php. Everything works, but ajax does not style the element. Anyone knows how i can fix this?

AJAX code

function showBrand(sel) {
var selectedYear = sel.options[sel.selectedIndex].value;  
$("#output1").html( "" );
$("#output2").html( "" );
if (selectedYear.length > 0 ) { 

 $.ajax({
        type: "POST",
        url: "fetch_state.php",
        data: "selectedYear="+selectedYear,
        cache: false,
        beforeSend: function () { 
            $('#output1').html('<img src="loader.gif" alt="" width="24" height="24">');
        },
        success: function(html) {    
            $("#output1").html( html );
            $("#output1").addClass( "section colm colm6");
        }
    });
} 

}

PHP code

    require("configure.php");
$car_brand = ($_REQUEST["selectedYear"] <> "") ? trim( addslashes($_REQUEST["selectedYear"])) : "";
if ($car_brand <> "" ) { 
$sql = "SELECT DISTINCT make FROM VehicleModelYear WHERE year = ".$car_brand ." ORDER BY make desc";
$count = mysql_num_rows( mysql_query($sql) );
if ($count > 0 ) {
$query = mysql_query($sql);

?>

<div class="section colm colm6">
<label for="carBrand" class="field-label">(*) Merk</label>
<select name="brand" onchange="showCity(this);">
    <option value="">Selecteer merk</option>
    <?php while ($rs = mysql_fetch_array($query)) { ?>
    <option value="<?php echo $rs["make"]; ?>"><?php echo $rs["make"]; ?></option>
    <?php } ?> 
</select>
<i class="arrow double"></i>
</label>
</div>
<?php 
    }
}
?>

HTML code // Here must be the second dropdown, loaded true ajax..

            <div id="output1">
                        </div><!-- end section -->

Assuming <element id="output1"/> exists your jQuery looks fine.

Check your browser net tab (f12) to see if it was able to locate loader.gif

Edit

when I said check that <element> exists, i didn't mean literally element I meant in general like a div etc, since you're original post contained no reference to output1

this is obviously some issue with jQuery ui or smartform

Try changing:

<element id="output1" class="section colm colm6">
  <div class="section colm colm6">
    <label class="field-label" for="carBrand">(*) Merk</label>
       <select onchange="showCity(this);" name="brand">
         <option value="">Selecteer merk</option>
     <option value="Volvo">Volvo</option>
          ....

         </select>
     <i class="arrow double"></i>
  </div>
</element>

To:

  <div id="output1" class="section colm colm6">
    <label class="field-label" for="carBrand">(*) Merk</label>
       <select onchange="showCity(this);" name="brand">
         <option value="">Selecteer merk</option>
     <option value="Volvo">Volvo</option>
          ....

         </select>
     <i class="arrow double"></i>
  </div>

Whatever it is that you're using to style the form, jQuery ui or smartform, I couldn't figure it out must have some method to apply styles post pageload. you'll need to call that method in your ajax success method.

I found your problem:

your <#output/> looks like this:

<div id="output1" class="section colm colm6">
    <div class="section colm colm6">
        <label for="carBrand" class="field-label">(*) Merk</label>
        <select name="brand" onchange="showCity(this);">
            <option value="">Selecteer merk</option>
            <option value="Volvo">Volvo</option>
            ...
        </select>
        <i class="arrow double"></i>
    </div>
</div>

It should look like this:

<div id="output1">
    <div class="section colm colm6">
        <label for="carBrand" class="field-label">(*) Merk</label>
---->   <label class="field select state-succes">    <---------------you miss this label
            <select name="brand" onchange="showCity(this);">
                <option value="">Selecteer merk</option>
                <option value="Volvo">Volvo</option>
                ...
            </select>
            <i class="arrow double"></i>
        </label>
    </div>
</div>

• You're missing the encapsulating <label class="field select state-succes"> that is present in your first dropmenu.

Also, this $("#output1").addClass( "section colm colm6"); adds the class to #output, but it already contains an extra div with that same class. It messes up the alignment of the dropdown in the form.
Either remove that extra div that has the same class, or don't add the class to #output.