Изменение выпадающего значения на основе AJAX Response

Question

Я не очень разбираюсь в AJAX, но по всем счетам я думаю, что это должно работать. Что нужно сделать, так это то, что пользователь выбирает имя из выпадающего списка, а другой раскрывающийся список (заполненный из базы данных mysql с помощью PHP) автоматически выбирает связанный объект. Так скажем, у вас было:

Имя: Сьюзи/Michael/Karen

Любимые фрукты: яблоко/оранжевый/Mango/гуавы

, выбрав Сьюзи, она автовыбора "Orange", так как это ее любимый фрукты в базе данных.

У меня есть этот код для Ajax, чтобы изменить выпадающий список на связанный с ним «плод».

<script type="text/javascript"> 
function getAff(str) 
{ 
if (str=="NULL" || str=="") 
    { 
    document.getElementById("fruit").value=""; 
    return; 
    } 
if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    alert(xmlhttp.responseText); 

var indexVal = document.getElementById("fruit").length; 
    for(x=0; x<indexVal;x++) { 
    if (document.getElementById("fruit").options[x].value == xmlhttp.responseText) { 
    document.getElementById("fruit").selectedIndex = x; 
    //alert(xmlhttp.responseText); 
    } 
    } 
    } 
    } 
xmlhttp.open("GET","getaff.php?q="+str,true); 
xmlhttp.send(); 
} 
</script> 

Я позаботился о том, чтобы он потянул правильные значения, хотя я прокомментировал это здесь.

Одна зацепка заключается в том, что раскрывающийся список НЕ меняется. Я не знаю, вызвано ли это тем, что оно генерируется через php? Однако этого не должно быть. Значение каждого выпадающего списка - это название плода, который вытаскивается из базы данных. Я также предупредил о себе значение indexvalue, чтобы узнать, даже ли он читает выпадающий список, и я получаю правильный номер. Но без изменения выпадающего списка. Есть предположения? Спасибо!

Answer 1

Попробуйте установить выбранное значение на < вариант > тега, вместо < выберите > и обрезки пробелы из ответа:

if (document.getElementById("fruit").options[x].value == xmlhttp.responseText.trim()) { 
    document.getElementById("fruit").options[x].selected = "selected"; 
} 

Answer 2

Несколько вещей, чтобы попробовать:

• Вы сравнивая значение, или innerHTML?

• Вы действительно уверены, что значение (или innerHTML) соответствует вашему отзыву?

Answer 3

Я не очень опытен с AJAX но по всем счетам Я думаю, что это должно быть

Если вы не знакомы с javascript, я не думаю, что вы должны писать простой javascript (это сложно). Используйте фреймворк, например, jquery, который очень популярен и делает эти мирские задачи легкими, как пирог.

Что он должен сделать, это пользователь выбирает имя из выпадающего списка, и других выпадающий (заполняется из базы данных тузд с PHP) автоматически выбирает соответствующий объект.

Вы должны посмотрите следующие разделы:

• How Jquery works: чтобы вы начали.
• s elect(): Привязать обработчик события к событию «выбрать» JavaScript или вызвать это событие для элемента.

• .load:: Загрузка данных с сервера и размещение возвращенного HTML в согласованный элемент.

• Jquery.get/jQuery.getJSON(): Загрузить данные с сервера с помощью HTTP GET-запроса/загрузить JSON-кодированные данные с сервера с использованием HTTP-запроса GET.

• Jquery.post: Загрузка данных с сервера с использованием запроса HTTP POST.

Когда вы читаете/просматриваете эти разделы, вы должны быть в состоянии написать это без каких-либо усилий (плюс многое другое благодаря невероятному Джону Ресигу).