Как передать значение предыдущего элемента формы в функцию «onchange» javascript?

Question

Я хочу сделать некоторые улучшения пользовательского интерфейса для страницы, которую я разрабатываю. В частности, мне нужно добавить еще одно раскрывающееся меню, позволяющее пользователю фильтровать результаты.

Это мой текущий код: HTML файл:

<select name="test_id" onchange="showGrid(this.name, this.value, 'gettestgrid')"> 
<option selected>Select a test--></option> 
<option value=1>Test 1</option> 
<option value=2>Test 2</option> 
<option value=3>Test 3</option> 
</select> 

Это псевдо-код для того, что я хочу, чтобы это произошло:

<select name="test_id"> 
<option selected>Select a test--></option> 
<option value=1>Test 1</option> 
<option value=2>Test 2</option> 
<option value=3>Test 3</option> 
</select> 
<select name="statistics" onchange="showGrid(PREVIOUS.name, PREVIOUS.VALUE, THIS.value)"> 
<option selected>Select a data display --></option> 
<option value='gettestgrid'>Show averages by student</option> 
<option value='gethomeroomgrid'>Show averages by homeroom</option> 
<option value='getschoolgrid'>Show averages by school</option> 
</select> 

Как получить доступ к имени предыдущего поля и значение? Любая помощь очень ценится, THX!

Кроме того, функция JS для справки:

function showGrid(name, value, phpfile) 
{ 
xmlhttp=GetXmlHttpObject(); 
if (xmlhttp==null) 
{ 
alert ("Browser does not support HTTP Request"); 
return; 
} 
var url=phpfile+".php"; 
url=url+"?"+name+"="+value; 
url=url+"&sid="+Math.random(); 

xmlhttp.onreadystatechange=stateChanged; 
xmlhttp.open("GET",url,true); 
xmlhttp.send(null); 
} 

Answer 1

Прежде всего обеспечить эти выберите коробки с уникальными идентификаторами, а затем передать идентификатор предыдущего окне выбора функции и функции получить элемент DOM используя document.getElementById, а затем получить имя и значение этого элемента.

<select name="test_id" id="test_id"> 


<select name="statistics" onchange="showGrid('test_id', THIS.value)"> 

function showGrid(id, phpfile) 
{ 
var previousElem = document.getElementById (id); 

xmlhttp=GetXmlHttpObject(); 
if (xmlhttp==null) 
{ 
alert ("Browser does not support HTTP Request"); 
return; 
} 
var url=phpfile+".php"; 
url=url+"?"+previousElem.name+"="+previousElem.value; 
url=url+"&sid="+Math.random(); 

xmlhttp.onreadystatechange=stateChanged; 
xmlhttp.open("GET",url,true); 
xmlhttp.send(null); 
} 

Answer 2

Если все ваши избранные братья и сестры (дети одного родителя), используйте функцию предварительного доступа для выбора prev.

псевдокод:

<select name='prev'>....</select> 
<a>other tag</a> 
<select name='x' onchange='handle(this);'>...</select> 

function handle(select) { 
    // find previous 
    var prev = select.previousSibling; 
    while (prev && prev.nodeName.toLowerCase() === 'select') { 
     prev = prev.previousSibling; 
    } 
    if (prev && prev.nodeName.toLowerCase() === 'select') { 
     // found 
    } else { 
     // not found 
    } 

} 

Answer 3

Я только что получил эту страницу на Google для 'JavaScript "предыдущий элемент формы"'. Поскольку я просто хотел получить общее решение, я попробовал опрокинуться. Кажется, он работает нормально. Есть, вероятно, лучшие способы, но это делает работу.

function previous_form_element(form,element){ 
    for (i=1;i<form.elements.length;i++){ 
     if (form.elements[i] == element){ 
      return form.elements[i-1]; 
     } 
    } 
    return undefined; 
} 

... 
button.onclick = function(){ 
    alert(previous_form_element(this.form,this).value); 
}