JavaScript DHTML/Form Control/List
Содержание
Determining the Size of the List
<HTML>
<HEAD>
<SCRIPT LANGUAGE = "JavaScript">
function moveon() {
var urlAddress = "";
urlAddress = document.forms[0].Edit1.value;
parent.frames[1].location = urlAddress;
document.forms[0].Edit2.value = parent.frames[1].history.length;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT type="text" name="Edit1">
<INPUT type="button" value="move" onClick="moveon()">
<INPUT type="text" name="Edit2">
</FORM>
</BODY>
</HTML>
Determining the Value or Text of the Selected Option
<html>
<head>
<script language = "JavaScript">
function getSelectValue(selectObject) {
return selectObject.options[selectObject.selectedIndex].value
}
</script>
</head>
<body>
<form name="form1">
Songs:
<select NAME="songs" SIZE=1>
<option VALUE="AA">AA</option>
<option VALUE="BB">BB</option>
<option VALUE="CC">CC</option>
<option VALUE="DD">DD</option>
<option VALUE="EE">EE</option>
<option VALUE="FF">FF</option>
</SELECT><p>
<input type=button value="Show Current" onClick="alert(getSelectValue(this.form.songs))">
</form>
</body>
</html>
Determining the Values of Multiselection Lists
<html>
<head>
<script language = "JavaScript">
function showSelection(objectName) {
var list = ""
for (var i=0; i<objectName.length; i++) {
if (objectName.options[i].selected) {
list += objectName.options[i].text + "<p>"
}
}
alert(list)
}
</script>
</head>
<body>
<form name="form1">
Pick Your Favorite Songs From the List:<p>
<select NAME="songs" SIZE=5 MULTIPLE>
<option>AA</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
<option>F</option>
<option>G</option>
<option>H</option>
<option>I</option>
<option>J</option>
</SELECT><p>
<input type=button value="Show Selection" onClick="showSelection(this.form.songs)">
</form>
</body>
</html>
Selection List Event Handling
<HTML>
<HEAD>
<TITLE>Handling Selection List Events</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function updateOrder() {
var orderString="";
var n = document.diner.entries.length;
for(i=0;i<n;++i) {
if(document.diner.entries.options[i].selected) {
orderString+=document.diner.entries.options[i].value+"\n"
}
}
document.diner.summary.value=orderString
}
//--></SCRIPT>
</HEAD>
<BODY>
<FORM NAME="diner">
<H2 ALIGN="CENTER">The Web Diner</H2>
<P><B>Place your order:</B></P>
<SELECT NAME="entries" SIZE="4" MULTIPLE="MULTIPLE" ONCHANGE="updateOrder()">
<OPTION VALUE="Hamburger">A</OPTION>
<OPTION VALUE="Hot Dog">B</OPTION>
<OPTION VALUE="Chicken Sandwich">C</OPTION>
<OPTION VALUE="French Fries">D</OPTION>
<OPTION VALUE="Onion Rings">E</OPTION>
<OPTION VALUE="Soda">F</OPTION>
<OPTION VALUE="Milk Shake">G</OPTION>
<OPTION VALUE="Coffee">H</OPTION></SELECT>
<P><B>You ordered: </B></P>
<P>
<TEXTAREA NAME="summary" ROWS="4" COLS="20"></TEXTAREA></P>
<P><INPUT TYPE="SUBMIT" NAME="order" VALUE="Let me have it!"></P>
</FORM>
</BODY>
</HTML>