Html dom refers to some dom operations supported by various browsers before w3c standards emerge.
1. Select object.
Attribute
A, selectedIndex: subscript of the selected option. The subscript starts from 0.
B, length: Get or set the number of options
C, options: returns an array. The array element is an Option object.
2. Options object
Attribute:
A, text: Option text content
B, value: Optional values
C, selected: If this option is selected, the value is true; otherwise, the value is false.
TIPS: Create an Option object
Copy codeThe Code is as follows:
Var op = new Option (text, value );
A cascade drop-down list I wrote:
The Code is as follows:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
<Html>
<Head>
<Style>
# D1 {
Width: 400px;
Height: 250px;
Background-color: # FFE4B5;
Margin: 40px auto;
}
# D1_head {
Color: white;
Font-size: 20px;
Font-family: "Arial ";
Height: 24px;
Background-color: bule;
}
# D1_content {
Padding-left: 30px;
Padding-top: 30px;
}
</Style>
<Script src = "prototype-1.6.0.3.js"> </script>
<Script type = "text/javascript">
Function doAction (index ){
Var arr = new Array;
Arr [0] = [new Option ('-- Research Direction --', '-1')];
Arr [1] = [new Option ('business English ', 'engish1 '),
New Option ('Anglo American literature ', 'engish2')];
Arr [2] = [new Option ('grid compute', 'computer1 '),
New Option ('computer soft', 'computer2 '),
New Option ('graphic compute', 'computer3')];
$('S2 '). innerHTML = '';
For (I = 0; I <arr [index]. length; I ++ ){
$('S2 '). options [I] = arr [index] [I];
}
}
</Script>
</Head>
<Body style = "font-size: 30px;">
<Div id = "d1">
<Div id = "d1_head"> professional selection </div>
<Div id = "d1_content">
<Form>
<Select naem = "s1" id = "s1" style = "width: 120px ;"
Onchange = "doAction (this. selectedIndex);">
<Option value = "-1"> -- professional -- </option>
<Option value = "english"> -- english -- </option>
<Option value = "computer"> -- computer -- </option>
</Select> <select name = "s2" id = "s2" style = "width: 120px;">
<Option value = "-1"> -- Research Direction -- </option>
</Select> <input type = "submit" value = "OK"/>
</Form>
</Div>
</Div>
</Body>
</Html>