2009-10-01 52 views
0

我想對我正在開發的一個頁面進行一些UI改進。具體來說,我需要添加另一個下拉菜單以允許用戶過濾結果。如何將前一個表單元素的值傳遞給「onchange」javascript函數?

這是我當前的代碼: 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); 
} 

回答

0

首先提供這些選擇框具有獨特的ID,然後通過前面的選擇框的id的功能和作用得到的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); 
} 
0

如果所有選擇都是兄弟姐妹(一個父母的子女),請使用previousSibling檢測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 
    } 

} 
0

我剛剛在谷歌這個頁面將 '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); 
} 
相關問題