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）存储当前值。一个解决办法是做这样的事情：