JavaScript和HTML選擇框

我有默認值的選擇框，我想用JavaScript來獲取默認值和當前值，下面是我的HTML選擇框：JavaScript和HTML選擇框

<SELECT ID="TEST" NAME="TEST" ONCHANGE="TEST()"> 
<OPTION ID="1" VALUE="TEST1" SELECTED/> 
<OPTION ID="2" VALUE="TEST2"/> 
</SELECT>

問候，拉吉

來源

2011-03-22 rajputhch

-1，根據下面評論中的所有來回，你還沒有做好充分的解釋你需要什麼。 – jessegavin 2011-03-23 02:52:30

@ jessegavin：我在這最後幾天工作，但我還沒有搞清楚。下面的答案是不合適的。如果您有任何提示，請分享。 – rajputhch 2011-03-23 11:13:17

你的一個錯誤是說「默認」而不是「以前」。請編輯你的問題並解釋你的真正含義。 :) – 2011-03-23 11:27:31

您可以設置元素的自定義屬性在文檔的onload事件：

window.onload = function() { 
    var oDDL = document.getElementById("TEST"); 
    oDDL.setAttribute("default_value", oDDL.value); 
};

然後來閱讀：

function Test() { 
    var oDDL = document.getElementById("TEST"); 
    var strCurrentValue = oDDL.value; 
    var strDefaultValue = oDDL.getAttribute("default_value"); 
    alert("Default value is: " + strDefaultValue + "\n Current value is: " + strCurrentValue); 
}

完整代碼和測試用例：http://jsfiddle.net/yahavbr/MbnH7/

編輯：支持多個下拉菜單，第一遍參考onchange事件是這樣的：

<select id="TEST" name="TEST" onchange="Test(this);">

然後設置在一個循環中的自定義屬性：

window.onload = function() { 
    var arrDDLs = document.getElementsByTagName("select"); 
    for (var i = 0; i < arrDDLs.length; i++) { 
     var oDDL = arrDDLs[i]; 
     oDDL.setAttribute("default_value", oDDL.value); 
    } 
};

而且測試功能也需要小的變化，因爲它是沒有得到下拉作爲參數：

function Test(oDDL) { 
    var strCurrentValue = oDDL.value; 
    var strDefaultValue = oDDL.getAttribute("default_value"); 
    alert("Default value is: " + strDefaultValue + "\n Current value is: " + strCurrentValue); 
}

更新後的測試案例：http://jsfiddle.net/yahavbr/MbnH7/1/

編輯II：要sh先前的選定值需要更改名稱，並在每次更改時都存儲該值。在onload變成這樣：

window.onload = function() { 
    var arrDDLs = document.getElementsByTagName("select"); 
    for (var i = 0; i < arrDDLs.length; i++) { 
     var oDDL = arrDDLs[i]; 
     oDDL.setAttribute("previous_value", oDDL.value); 
    } 
};

（唯一的變化是自定義屬性名稱）

和函數變爲：

function Test(oDDL) { 
    var strCurrentValue = oDDL.value; 
    var strPreviousValue = oDDL.getAttribute("previous_value"); 
    alert("Previous value is: " + strPreviousValue + "\n Current value is: " + strCurrentValue); 
    oDDL.setAttribute("previous_value", strCurrentValue); 
}

（名稱變更以及設置自定義屬性）

更新並希望最終測試用例：http://jsfiddle.net/yahavbr/MbnH7/4/

來源

2011-03-22 23:12:21

@Shadow Wizard：工作很好，我在一個頁面中有30個選擇框。我該怎麼做 – rajputhch 2011-03-22 23:39:00

@raj你想完成什麼？提交表單時，是否要將選定值與默認值進行比較？ – jessegavin 2011-03-23 02:47:55

不，我想發送先前選定的值並顯示選定的值。 – rajputhch 2011-03-23 03:11:36

編輯 - 我之前回答錯誤 - 這是一個示例HTML頁面。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>untitled</title> 
<script type="text/javascript" language="javascript"> 

function showOptionValue(oSelect) { 
    var def; 
    for (var i=0; i<oSelect.options.length; ++i) //loop through select options 
    if (oSelect.options[i].defaultSelected){ //this option's defaultSelected property is set to true (from HTML: selected="selected") 
     def = oSelect[i].text; //or .value 
    } 
    var sel; 
    sel = oSelect[oSelect.selectedIndex].text; 
    alert (sel + ' : ' + def); 
} 

function resetSelect(oSelect) { 
for (var i=0; i<oSelect.options.length; ++i) //loop through select options 
if (oSelect.options[i].defaultSelected) //this option's defaultSelected property is set to true (from HTML: selected="selected") 
oSelect.options[i].selected = true; //so, set its selected property to true, selecting it 
showOptionValue(oSelect); //reset status 
} 

</script> 
</head> 
<body> 
<form> 
<!-- call handler function, pass Select object (represents drop-down list) --> 
<SELECT NAME="cbo" onchange="showOptionValue(this)"> 
<OPTION VALUE="not_default">Not DEFAULT VALUE</OPTION> 
<OPTION VALUE="1">Small</OPTION> 
<!-- default value, preselected --> 
<OPTION VALUE="2" selected="selected">Medium</OPTION> 
<OPTION VALUE="3">Large</OPTION> 
</SELECT> 
<!-- call handler function, pass Select object using its name as a variable --> 
<input type="button" value="Reset Drop-down" onclick="resetSelect(cbo)"> 
</form> 
</body> 
</html>

來源

2011-03-22 22:59:47 Nija

完全與問題無關..他沒有詢問獲取**當前**值，但默認值：最初選擇的值.. – 2011-03-22 23:03:08

Doh ...我討厭它，當我想念時。 – Nija 2011-03-22 23:05:26

對不起，你的代碼仍然只能得到當前選定的值，這不是問題。 – 2011-03-22 23:13:09

HTML ：

<SELECT ID="TEST" NAME="TEST" ONCHANGE="TEST(this)"> 
    <OPTION ID="1" VALUE="TEST1" SELECTED>TEST 1</OPTION> 
    <OPTION ID="2" VALUE="TEST2">TEST 2</OPTION> 
</SELECT>

的javascript：

// store currently selected value 
var previousValue = document.getElementById('TEST').value; 

function TEST(e) { 
    alert('old value = ' + previousValue); 
    alert('new value = ' + e.value); 
    // store new value 
    previousValue = e.value; 
}

example here

來源

2011-03-22 23:12:26

以前的值作爲全局變量，即使我不能硬編碼選擇框ID also.is有可能做到這一點通過放置previousvalue變量函數內。 – rajputhch 2011-03-23 02:40:53

爲什麼沒有onfocus事件（與onload）存儲當前值。一個解決辦法是做這樣的事情：