javascript with html select box_问答_开发者_运维开发者技术经验分享

I have select box with default value,i want to re开发者_JAVA技巧trieve default value and changed value using javascript,Below is my Html Select box:

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

Regards, Raj

You can set custom attribute of the element in the onload event of the document:

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

Then to read it:

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

Complete code and test case: http://jsfiddle.net/yahavbr/MbnH7/

Edit: to support more than one drop down, first pass reference in the onchange event like this:

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

Then set the custom attribute in a loop:

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

And the test function also need minor change as it's not getting the drop down as argument:

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

Updated test case: http://jsfiddle.net/yahavbr/MbnH7/1/

Edit II: to show the previously selected value some name changes are required, plus storing the value every time it's changing. The onload becomes this:

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

(Only change is the custom attribute name)

And the function becomes:

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

(Name change plus setting the custom attribute)

Updated and hopefully final test case: http://jsfiddle.net/yahavbr/MbnH7/4/

why not have the onfocus event (vs. onload) store the current value. one solution might be to do something like this:

$(t).data("prev",$(t).val())

and then have the onchange use that:

var oldVal = $(t).data("prev");

thus when someone clicks on, or tabs into, the ui element it stores the current state, and then can use that if there is a resulting change. also it would need to change the value if the change was accepted so that if focus was not changed (ie: they stayed in the pulldown and changed the value again) and they changed their mind and chose another option that the state was preserved.

many of the examples that i have seen of this store state in a that seemed to be vulnerable to change/events elsewhere.

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

EDIT - I answered wrong before - Here's a sample HTML page that does it.

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

<!DOCTYPE html>
<html>
<head>
	<title>Hello world</title>
	<script type="text/javascript">
		function fn(){
			var select = document.getElementById("selectbox");
			alert(select.options[select.selectedIndex].value)
			
		}
	</script>
</head>
<body>
	<header style="margin-left: 50%;">Welcome</header>
	<select id="selectbox">
		<option value="number 01">Number 01</option>
		<option value="number 01">Number 02</option>
		<option value="number 01">Number 03</option>
		<option value="number 01">Number 04</option>
	</select>
	<button style="margin-top:10px; margin-left:15px;" onclick="fn()">Click me</button>
</body>
</html>