Question

我想对我正在开发的页面进行一些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);
}

Answer 1

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

<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

如果您的所有选择都是兄弟姐妹（父母一方的孩子），请使用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
    }

}

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

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

3 个答案: