Показать текст ответа php с помощью ajax

Question

У меня есть функция onChange my select, которая показывает некоторый текст из php. Я использую ajax для выполнения этого запроса без перезагрузки всей страницы. проблемы для меня, у меня есть много дивов с одним классом, и я хочу, чтобы показать результат сопоставления АЯКСА с выбором я изменился:

<div class="x"> 
     <select class="mySelect"> 
     <option>1</option> 
     <option>2</option> 
     </select> 
     <div class="showHere">php text requested with ajax</div> 
    </div> 

<div class="x"> 
     <select class="mySelect"> 
     <option>1</option> 
     <option>2</option> 
     </select> 
     <div class="showHere">php text requested with ajax</div> 
    </div> 

<div class="x"> 
     <select class="mySelect"> 
     <option>1</option> 
     <option>2</option> 
     </select> 
     <div class="showHere">php text requested with ajax</div> 
    </div> 

Линия в AJAX:

document.getElementById("div").innerHTML = xmlhttp.responseText; 

Я хочу показать ответ в div-классе «showHere», но в RIGHT div, другими словами, в div, соответствующем моему выбору, я изменился, понял? Я не знаю, возможно ли это ...

Answer 1

Или вы можете использовать отправителя события и укоротить все это. Заполните результат вызова AJAX в следующем элементе (для этого требуется, чтобы div всегда был непосредственно после выбора).

С помощью этого кода вы получаете элемент, который инициировал событие (event.srcElement это запасной вариант, в случае когда пользователь работает с т.е., не интерпретирует event.target правильно):

var target = event.target || event.srcElement; 

Эту часть выбирает следующий элемент после того, как ваш выбор:

var nextDiv = target.nextSibling; 

Теперь добавьте свой ответ:

nextDiv.innerHTML = xmlhttp.responseText; 

Answer 2

Вам определенно нужно что-то отличить div. Могли бы дать им идентификатор и передать это функции AJAX в качестве параметра в вашем случае.

div class="x"> 
     <select class="mySelect"> 
     <option>1</option> 
     <option>2</option> 
     </select> 
     <div class="showHere" id="first">php text requested with ajax</div> 
    </div> 

<div class="x"> 
     <select class="mySelect"> 
     <option>1</option> 
     <option>2</option> 
     </select> 
     <div class="showHere" id="second">php text requested with ajax</div> 
    </div> 

<div class="x"> 
     <select class="mySelect"> 
     <option>1</option> 
     <option>2</option> 
     </select> 
     <div class="showHere" id="third">php text requested with ajax</div> 
    </div> 


In your script: 

function ajaxCall(id_of_target_div) { 
    ... 
    document.getElementById(id_of_target_div).innerHTML = xmlhttp.responseText ; 
}