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

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>

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

Кроме того, 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

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

псевдокод:

<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 2

Я только что получил эту страницу в 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);
}

Answer 3

Прежде всего предоставьте этим полям выбора уникальные идентификаторы, а затем передайте идентификатор предыдущего поля выбора функции и в функции получите элемент 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);
}