如何将前一个表单元素的值传递给“onchange”javascript函数？答案

【问题标题】：How do I pass the value of the previous form element into an "onchange" javascript function?如何将前一个表单元素的值传递给“onchange”javascript函数？
【发布时间】：2009-10-01 04:43:11
【问题描述】：

我想对我正在开发的页面进行一些 UI 改进。具体来说，我需要添加另一个下拉菜单以允许用户过滤结果。

这是我当前的代码： 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);
}

【问题讨论】：

标签： javascript forms javascript-events

【解决方案1】：

首先为这些选择框提供唯一的 id，然后将前一个选择框的 id 传递给函数，并在函数中使用 document.getElementById 获取 DOM 元素strong> 然后检索该元素的名称和值。

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

【讨论】：

【解决方案2】：

如果您的所有选择都是兄弟姐妹（一个父母的孩子），请使用 previousSibling 检测上一个选择。

伪代码：

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

}

【讨论】：

【解决方案3】：

我刚刚在谷歌上找到了这个页面，用于“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);
}

【讨论】：