1. Dom actions for using the check box with the button
<body>
<input type= "checkbox" id= "Ckb1"/><br><br>
<input type= "button" value= "Next" id= "BTN1" disabled= "disabled"/>
</body>
<script>
document.getElementById (' ckb1 '). onclick = function () {
var ckb1 = document.getElementById (' ckb1 ');
var btn1 = document.getElementById (' btn1 ');
if (ckb1.checked) {
btn1.removeattribute (' disabled ');
}
else{
btn1.setattribute (' disabled ', ');
}
}
</script>
2. Dom actions for use with drop-down lists, text boxes, and buttons (two methods)
<body>
<select id= "SKD" size= "7" style= "width:100px;" ></select><br>
<select id= "SLT" size= "7" style= "width:100px;" ></select><br>
<input type= "text" id= "Ipt2"/><br>
<input type= "text" id= "TXT"/><br>
<input type= "button" id= "BTN2" value= "Add"/>
</body>
<script>
//First method (spelling string)
//document.getElementById (' btn2 '). onclick = function () {
//var ipt2= document.getelementbyid (' txt '). Value;
//var SKD = document.getElementById (' SKD ');
//Skd.innerhtml + = "<option>" + ipt2 + "</option>";
//document.getElementById (' Ipt2 '). value= "";
// }
///second method (build Element)
var txt = document.getElementById (' txt ');
var slt = document.getElementById (' slt ');
document.getElementById (' btn2 '). onclick = function () {
//Create a new option object
var opt = document.createelement (' option ');
//Set the value of the option object (point to Assignment)
opt.value = txt.value;
//Set the content of the option object
opt.innerhtml = txt.value;
//Object added to SLT (name)
Slt.appendchild (opt);
}
</script>
3. Two-way exchange effect of drop-down list and button
<body>
<select id= "Oldselect" size= "ten" multiple= "multiple" style= "width:100px;float:left;position:relative" >
<option > Beijing </option>
<option > Shanghai </option>
<option > Shanghai </option>
<option > Shenzhen </option>
<option > Hong Kong </option>
</select>
<select id= "Newselect" size= "multiple=" multiple, "style=" width:100px;float:left;margin-left:20px;position: relative; " >
<option > Basketball </option>
<option > Swimming </option>
<option > Fencing </option>
<option > Volleyball </option>
<option > Weightlifting </option>
</select>
<br><br><br><br><br><br><br><br><br><br>
<input type= "button" id= "BTN1" value= "Add to Right" style= "float:left;" />
<input type= "button" id= "BTN2" value= "added to left" style= "float:left;margin-left:50px;" />
<script>
document.getElementById (' btn1 '). Onclick=function () {
var oldselect = document.getElementById (' Oldselect ');
for (Var i=0;i<oldselect.options.length;i++) {
if (oldselect.options[i].selected) {
var newselect = document.getElementById (' Newselect ');
Newselect.appendchild (Oldselect.options[i]);
}
}
alert (Oldselect.options[oldselect.options.length].value);
}
document.getElementById (' btn2 '). Onclick=function () {
var newselect = document.getElementById (' Newselect ');
for (Var i=0;i<newselect.options.length;i++) {
if (newselect.options[i].selected) {
var oldselect = document.getElementById (' Oldselect ');
Oldselect.appendchild (Newselect.options[i]);
}
}
alert (Newselect.options[newselect.options.length].value);
}
</script>
Dom operation on JS--operation of Important instance