Обновление списка опций <select> с помощью jquery и ajax

Я пытаюсь сделать список опций для выбора html в соответствии с выбором, сделанным на предыдущем объекте select 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]));
    }
});

Поскольку я использую singleton для взаимодействия с моей базой mySQL, эта функция jquery вызывает "промежуточный".php файл с именем updateTypes.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, но не обновляет их. Кажется, что это неправильно, когда я декодирую данные JSON в jquery. Почему это происходит не так? Соответствует ли цикл для обновления выбранного объекта?

Ответ 1

Вы можете использовать $.getJSON, если ожидаете ответ json. Вы также можете использовать $.each(), а затем просто .append() для тега select. Вы можете ссылаться на this.property внутри .each().

Что-то вроде следующего:

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

Это предполагает, что ваш ответ json выглядит примерно так:

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

Ответ 2

Ваш код $("#Type").remove(); удаляет объект select, а не его параметры. Правильный способ удаления параметров:

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

или

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

Второе решение выглядит лучше, чем указано здесь: Как удалить параметры из выбранного элемента без утечки памяти?

Также есть ошибка в части, которая добавляет новые параметры. Ваш 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", которое вы хотели использовать (Как получить элемент DOM из селектора JQuery)