使用jquery和ajax更新<select>选项列表

Question

我试图根据在先前的html选择对象上做出的选择来更新选项列表.我的jquery在下面.这被正确调用.

var brandName = $("#Brand").val();

$.get("updateTypes.php?q="+brandName, function(data) {

    $("#Type").remove();
    var typeData = JSON.parse(data);

    for (loop=0; loop < typeData.length; ++loop) {
        $("#Type").options.add(new Option(typeData[loop]));
    }
});

当我使用单例与我的mySQL数据库接口时,这个jquery函数调用一个名为updateTypes.php的'go-between'.php文件,如下所示:

include 'databaseInterface.php';
$brand = $_GET["q"];
$typesData = databaseInterface::getBrandTypes($brand);
return $typesData;

这将在我的单例中调用getBrandTypes函数:

$query = "SELECT psTypeName FROM types WHERE brands_psBrandName='$BrandName'";
$result = mysqli_query($con, $query) or die ("Couldn't execute query. ".mysqli_error($con));
$resultArray = array();
while ($row = mysqli_fetch_assoc($result)) { 
    extract($row);
    $resultArray[] = $psTypeName;   
}

return json_encode($resultArray);

网页正确地从jquery函数中删除现有选项,但无法更新它们.当我在jquery中解码JSON数据时似乎出错了.为什么会出错？更新选择对象的循环是否合适？

Answer 1

$.getJSON如果您期望json响应,您可以使用.您可能还可以使用$.each(),然后简单地.append()给select标签.你可以this.property在里面参考.each().

类似于以下内容:

$.getJSON("updateTypes.php?q="+brandName, function(data) {
    $("#Type").html('');
    $.each(data, function(){
        $("#Type").append('<option value="'+ this.value +'">'+ this.name +'</option>')
    )
})

这将假设您的json响应类似于以下内容:

[ { name : "foo", value : "bar" }, { name : "another", value : "example" } ]

Answer 2

您的代码$("#Type").remove();将删除选择对象而不是其选项.删除选项的正确方法是:

$("#Type option").remove();

要么

$("#Type").html('');

第二个解决方案似乎更好,如下所述:如何从没有内存泄漏的select元素中删除选项？

添加新选项的部件中也存在错误.你的javascript代码应该是:

var brandName = $("#Brand").val();

$.get("updateTypes.php?q="+brandName, function(data) {

    $("#Type option").remove();
    var typeData = JSON.parse(data);

    for (loop=0; loop < typeData.length; loop++) {
        $("#Type").get(0).options.add(new Option(typeData[loop]));
    }
});

该$('#Type').get(0)方法引用具有您想要使用的"options"属性的原始DOM对象(如何从JQuery选择器获取DOM元素)