jQuery page check box Select, Inverse, drop-down linkage (cascade)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="./dist/css/bootstrap.min.css"> <link rel="stylesheet" href="./dist/css/zTreeStyle.css"> <title>Document</title> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12"> <p class="text-center" style="background:rgba(0, 0, 0, .075);"> <span style="background:lightcyan;">< <span style="color:darkblue;">三级联动菜单</span>></span> </p> </div> <div class="col-md-4"> <label for = " One " > a menu </ label> <select name="default1" id="input${1/(\w+)/\u\1/g}" class="form-control"> <option value="default">-- Select One --</option> </select> </div> <div class="col-md-4"> <label for = " Two " > two menu </ label> <select name="default2" id="input${1/(\w+)/\u\1/g}" class="form-control"> <option value="default">-- Select One --</option> </select> </div> <div class="col-md-4"> <label for = " Three " > three menu </ label> <select name="default3" id="input${1/(\w+)/\u\1/g}" class="form-control"> <option value="default">-- Select One --</option> </select> </div> </div> <div class="row"> <div class="col-md-2"> <div class="row"> <div class="col-md-4"> <input type="checkbox" name="getAll" id="getAll" value="全选" /> <br> 全选 <input type="checkbox" name="fsAll" id="fsAll" value="反选" /> <br> 反选 <input class="btn btn-primary" type="button" name="addCks" id="addCks" value="添加"> <input name="rem" id="rem" type="button" class="btn btn-danger" value="清空" /> </div> <div class="col-md-6 chekboxContent"> <input type="checkbox" name="ck" value="1"> <input type="checkbox" name="ck" value="2"> <input type="checkbox" name="ck" value="3"> <input type="checkbox" name="ck" value="4"> <input type="checkbox" name="ck" value="5"> <input type="checkbox" name="ck" value="6"> <input type="checkbox" name="ck" value="7"> <input type="checkbox" name="ck" value="8"> <input type="checkbox" name="ck" value="9"> <input type="checkbox" name="ck" value="10"> <input type="checkbox" name="ck" value="11"> <input type="checkbox" name="ck" value="12"> <input type="checkbox" name="ck" value="13"> <input type="checkbox" name="ck" value="14"> <input type="checkbox" name="ck" value="15"> <input type="checkbox" name="ck" value="16"> <input type="checkbox" name="ck" value="17"> <input type="checkbox" name="ck" value="18"> <input type="checkbox" name="ck" value="19"> <input type="checkbox" name="ck" value="20"> <input type="checkbox" name="ck" value="21"> <input type="checkbox" name="ck" value="22"> <input type="checkbox" name="ck" value="23"> <input type="checkbox" name="ck" value="24"> </div> </div> </div> <div class="col-md-8"> <p class="text-center" id="oldContent"></p> <p class="text-center" id="newContent"></p> </div> </div> </div> <script src="./dist/js/jquery.min.js"></script> <script src="./dist/js/bootstrap.min.js"></script> <script> $(function () { $('[name=defaultSel]').empty(); // 清空 $('[name=defaultSel]').prepend("<option value='default'>请选择</option>").val('default'); //---------------------------------------------------------------------------------------- // initialization clearing the data $ ( ' [= name of default1] ' ) .empty (); $('[name=default1]').prepend("<option value='default'>请选择</option>").val('default'); Empty2(); Empty3(); // initialization data is loaded // first drop-down menu additional data for (I = . 1 ; I <= 10 ; I ++ ) { $('[name=default1]').append("<option value='" + i + "'>" + i + "</option>"); } }) // first drop-down menu selection event $ ( ' [= name of default1] ' ) .change (function () { IF ($ ( the this ) .val () === " default " ) { Empty2(); Empty3(); } else { Empty2(); Empty3(); for (i = 0; i <= 9; i++) { $('[name=default2]').append("<option value=" + $(this).val() + i + ">" + $(this).val() + i + "</option>"); // 解除禁用 $('[name=default2]').removeAttr('disabled'); } } }); // Clear the second menu function Empty2 () { $('[name=default2]').empty(); $('[name=default2]').prepend("<option value='default'>请选择</option>").val('default'); // 禁用 $('[name=default2]').attr('disabled', 'disabled'); } // second menu click click event $ ( ' [name = default2] ' ) .change (function () { IF ($ ( the this ) .val () === ' default ' ) { Empty3(); } else { Empty3(); for (i = 0; i <= 9; i++) { $('[name=default3]').append("<option value=" + $(this).val() + ">" + $(this).val() + i + "</option>"); // 解除禁用 $('[name=default3]').removeAttr('disabled'); } } }); // Clear third drop-down menu function Empty3 () { $('[name=default3]').empty(); $('[name=default3]').prepend("<option value='default'>请选择</option>").val('default'); // 禁用 $('[name=default3]').attr('disabled', 'disabled'); } // Get all the check boxes var CKS = $ ( ' INPUT [name = CK] ' ); // Select $ ( ' [= the getAll name] ' ) .click (function () { IF ($ ( the this ). IS ( ' : the checked ' )) { cks.each(function () { $(this).prop('checked', true); }); } else { cks.each(function () { $(this).prop('checked', false); }); } }) // 反选 $('[name=fsAll]').click(function () { cks.each(function () { $ ( The this ) .prop ( ' the checked ' , $ (! The this ) .prop ( ' the checked ' )); // simple wording }); // determines whether the selected Select IF ($ ( ' INPUT [name = the getAll] ' .) IS ( ' : the checked ' )) $('input[name=getAll]').prop('checked', false); else $('input[name=getAll]').prop('checked', true); }); // Add click event $ ( ' INPUT [name = addCks] ' ) .click (function () { var STR = '' ; // additional content $ ( ' #oldContent ' ) .empty (); // Clear before the data is $ ( ' #newContent ' ) .empty (); // Clear before the data is cks.each (function () { // cycle selected IF ($ ( the this ) .prop ( ' the checked ' )) str += this.value + ','; }); $('#oldContent').append(str); $('#newContent').append(ReturnCon(str)); }) // Clear the contents of $ ( ' INPUT [name = REM] ' ) .click (function () { $('#oldContent').empty(); $('#newContent').empty(); }) // methods of resolution function ReturnCon (RES) { var Result = '' ; var ARR = new new the Array (); arr = res.split(','); for (var i = 0; i < arr.length; i++) { result += arr[i]; } return result; } </script> </body> </html>