JS implementation list and multi-choice box selection with preview Animation

JS implementation list and multi-choice box selection with preview Animation

1. Function Preview

2html code

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<Span> <Tr> <Td> product scope: </td> <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> <Td> <span id = "typeOneResult"> </span> <span id = "typeOneSubResult"> </span> <Hr/> </td> </Tr> </Span>

3js code

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

$ ('# SelectTypeOne'). combobox ({ Url: config. urlMap. typeList, ValueField: 'name ', TextField: 'name ', Required: true, Width: '200 ', OnSelect: function (row ){ TypeName1 = row. name Certificate ('{typethree'{.html (""); Certificate ('{typeoneresult'{.html (""); Certificate ('{typeonesubresult'{.html (""); SubTypeName = []; $ ('# SelectTypeTwo'). combobox ({ Url: config. urlMap. typeList + "? Parent = "+ row. id, ValueField: 'name ', TextField: 'name ', Width: '200 ', 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 } Certificate ('{typethree'}.html (typeThreeName ); ('{Typeoneresult'{.html (typeName2 + "> "); Certificate ('{typeonesubresult'{.html (""); SubTypeName = []; }); } }) } }); }) // Delete subscript 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 } // 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 (",")); }