Home > Developer > JavaScript
JS implementation list and multi-choice box selection with preview animation and js Preview
1. Function Preview
2html code
<Span> <tr> <td> product scope: </td> <select id = "selectTypeOne" class = "easyui-combobox" data-options = "required: true "> <option> Level 1 Classification </option> </select> <select id =" selectTypeTwo "class =" easyui-combobox "data-options =" required: true "> <option selected =" selected "> all </option> </select> </td> </tr> <tr height =" 20px "> <td> </td> <td id = "typeThree"> </td> </tr> <tr height = "30px"> <td> </td> <span id = "typeOneResult"> </span> <span id = "typeOneSubResult"> </span>3js code
$ ('# SelectTypeOne '). combobox ({url: config. urlMap. typeList, valueField: 'name', textField: 'name', required: true, width: '000000', onSelect: function (row) {typeName1 = row. name Certificate ('your typethree'{.html (""); Certificate ('your typeoneresult'{.html (""); tags (""); subTypeName = []; $ ('# selectTypeTwo '). combobox ({url: config. urlMap. typeList + "? Parent = "+ row. id, valueField: 'name', textField: 'name', width: '000000', required: true, onSelect: function (row) {typeName2 = typeName1 + ">" + row. name; $. getJSON (config. urlMap. typeList + "? Parent = "+ row. id, function (data) {var typeThreeName = "" for (var I = 0; I <data. length; I ++) {typeThreeName + = "<input onclick = clinkType (\" "+ data [I]. name + "\") name = 'typethree 'value = "+ data [I]. name + "type = 'checkbox'>" + data [I]. name} dependencies (typeThreeName); ('{typeoneresult'}.html (typeName2 + ">"); dependencies (""); subTypeName = [] ;}}) }});}) // Delete the subscript Element Element Method 1 Array. prototype. remove = function (dx) {if (isNaN (dx) | dx> this. length) {return false;} for (var I = 0, n = 0; I <this. length; I ++) {if (this [I]! = This [dx]) {this [n ++] = this [I]} this. length-= 1} // Delete Array element method 2 Array. prototype. baoremove = function (dx) {if (isNaN (dx) | dx> this. length) {return false;} this. splice (dx, 1);} var subTypeName = []; function clinkType (name) {var index = subTypeName. indexOf (name) if (index =-1) {subTypeName. push (name);} else {subTypeName. baoremove (index) ;}('your typeonesubresult'{.html (subTypeName. join (","));}
How does js achieve multi-choice box linkage?Disable the attribute disabled = true of the sub-check boxes of furniture and ball games when accessing the page.
Write an onclick event in the furniture check box to call the js Function
Function check (){
// Var jiaju = document. form name. Check box name; get check box object
Var jiaju = document. getElementById ("id name") Get the object through id
If (jiaju. checked = true ){
// You can obtain the sub-check box objects one by one here and set disabled = false
Var jiaju = document. getElementById ("id name"). disabled = false;
.....
// You can also set the attributes of the subcheck box to the same name so that disabled = false can be cyclically
Var jiajus = document. getElementsByName ("subcheck Box Name") // obtain an array of objects.
For (var I = 0; I <jiajus. length; I ++ ){
Jiajus [I] = disabled = false;
}
} Else {
// This is not actually written
// If you do not select the furniture check box, you can invalidate it for the next time.
// You can use the subcheck box to restore the unselected status before the validity period.
Var jiajus = document. getElementsByName ("subcheck Box Name ")
For (var I = 0; I <jiajus. length; I ++) {// The Atomic check box when no furniture is selected again
Jiajus [I] = checked = false;
}
For (var I = 0; I <jiajus. length; I ++) {// invalidates the subcheck box again.
Jiajus [I] = disabled = false;
}
}
}
The same is true for ball games.
Question about multiple choice boxes in JS<Html>
<Head>
<Title> </title>
<Script type = "text/javascript" language = "javascript">
Var EPT = document. getElementsByTagName ("input ");
Function checkit (){
If (ipt [0]. checked ){
Ipt [1]. checked = false;
Ipt [1]. disabled = "disabled ";
Ipt [2]. checked = false;
Ipt [2]. disabled = "disabled ";
}
Else {
Ipt [1]. disabled = false;
Ipt [2]. disabled = false;
}
}
Function checkout (obj ){
If (obj. checked ){
Ipt [0]. checked = false;
Ipt [0]. disabled = "disabled ";
}
Var j = 0;
For (var I = 1; I <EPT. length; I ++ ){
If (ipt [I]. checked) j ++;
}
If (j = 0) EPT [0]. disabled = false;
}
</Script>
</Head>
<Body>
<Label>
<Input type = "checkbox" onclick = "checkit ();" name = "degree_more_than" value = "1"/> unlimited </label>
<Label>
<Input type = "checkbox" onclick = "checkout (this);" name = "degree_more_than" value = "1"/> Class 1 </label>
<Label>
<Input type = "checkbox" onclick = "checkout (this);" name = & quo ...... the remaining full text>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
