Question

Heeeeelp！：）

我的代码有问题。我想使用ajax，php＆amp; amp做一个下拉过滤器JSON。第一个下拉菜单（汽车的构建年份）加载真正的PHP。在第二个下拉菜单中，您必须选择汽车的品牌。这是真正的ajax请求和PHP。一切正常，但ajax不会对元素进行设计。谁知道我怎么能解决这个问题？

AJAX代码

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代码

    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 //这里必须是第二个下拉列表，加载true ajax ..

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

Answer 1

假设<element id="output1"/>存在，你的jQuery看起来很好。

检查浏览器网络标签（f12），看看它是否能够找到loader.gif

修改

当我说检查<element>存在时，我的意思并不是element我的意思就像div等一样，因为你原来的帖子中没有提到{ {1}}

这显然是output1或jQuery ui
的一些问题
尝试更改：

smartform

要：

<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>

无论您是使用jQuery ui还是smartform来设置表单的样式，我都无法理解它必须有一些方法来应用页面加载后的样式。您需要在ajax成功方法中调用该方法。

Answer 2

我发现了你的问题：

你的<#output/>看起来像这样：

<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>

它应该是这样的：

<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>

您错过了第一个dropmenu中存在的封装<label class="field select state-succes">。

此外，此$("#output1").addClass( "section colm colm6");会将该类添加到#output，但它已包含一个具有相同类的额外div。它弄乱了表格中下拉的对齐方式删除具有相同课程的额外div，或者不要将课程添加到#output。

样式成功函数ajax

2 个答案: