jquery ve ajax kullanarak <select> seçeneklerinin listesi

Question

Önceki html seçme nesnesinde yapılan bir seçime göre bir html seçim seçenekleri listesi güncelleştirmesi yapmaya çalışıyorum. Benim jquery aşağıda. Bu doğru çağrılıyor.

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

Bu çağrılar: Ben mySQL veritabanı arayüzü için a tek kullanıyorum gibi

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])); 
    } 
}); 

, bu jquery işlevi 'arabulucu' altındaysa updateTypes.php denilen .php dosyası çağırır aşağıda benim tekil içinde getBrandTypes fonksiyonu:

$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); 

web sayfası düzgün jquery işlevinden mevcut seçenekler kaldırır ancak bunları güncellemek için başarısız olur. JSO verilerini jquery'de çözdüğümde yanlış görünüyor. Neden yanlış gidiyor? Seçme nesnesini güncelleme döngüsü uygun mu?

Answer 1

Bir json yanıtı bekliyorsanız, $.getJSON'u kullanabilirsiniz. Ayrıca $.each() ve etiketlerini select etiketine de kullanabilirsiniz. .each()'un içine this.property referansı verebilirsiniz. Aşağıdaki gibi

şey:

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

Answer 2

Kodunuz $("#Type").remove(); seçme nesne değil, seçenekleri kaldırır:

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

Bu json yanıtını varsayılabilir aşağıdaki gibi bir şeydir. kaldırma seçeneklerin doğru yoludur:

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

veya

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

burada belirtildiği gibi ikinci çözüm daha iyi gibi görünüyor: yeni ekler kısmında bir hata

yoktur How to remove options from select element without memory leak? seçenekler. Sizin javascript kodu olmalıdır:

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) yöntem Bu cevap harika ama başka da belirttiği gibi (How to get a DOM Element from a JQuery Selector)