使用jquery和ajax更新选项列表

我试图根据在先前的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的“中间”.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

如果您期望json响应，可以使用$.getJSON 。 您也可以使用$.each()然后简单地使用.append()到select标签。 您可以在.each()引用this.property 。

类似于以下内容：

 $.getJSON("updateTypes.php?q="+brandName, function(data) { $("#Type").remove(); $.each(data, function(){ $("#Type").append(''+ this.name +'') ) }) 

这将假设您的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)方法引用原始DOM对象，它具有您想要使用的“options”属性（ 如何从JQuery选择器获取DOM元素 ）