3級下拉框聯動
阿新 • • 發佈:2019-02-12
效果圖:
下面看程式碼:
這兒有個地方要注意,在設定初始select時需要給option設定一個預設的選擇項,就像這樣,否則聯動效果出不來。<!DOCTYPE html> <html> <head> <title></title> </head> <body> <select id="virus_findby" class="form-control" name="virus_findby" onchange="SlectLinkMove()"> <option selected value="NoDistinguish">不區分</option> <!--NoDistinguish --> <option value="Scan">aa</option> <!--Scan --> <option value="GFile">bb</option> <!--GFile --> <option value="GWeb">cc</option> <!--GWeb --> <option value="GSmtp">dd(傳送)</option> <!--GSmtp --> <option value="GPop3">cc(接收)</option> <!--GPop3 --> </select> <span class="target_source_modual" style="display: none;">目標來源: </span> <select id="target_source" class="form-control target_source_modual" name="target_source" style="width: 100px;display: none;"> <option selected value="20">不區分</option> <!--NoDistinguish --> <option value="21">aa</option> <!--MobileDevices --> <option value="22">bb</option> <!--HardDisk --> <option value="23">cc</option> <!--NetSharing --> <option value="24">dd</option> <!--LightDisk --> <option value="25">eee</option> <!--VSuiteRamdisk --> </select> <span class="">處理結果: </span> <select id="cmpResult" name="cmpResult" class="form-control"> <option value="NoDistinguish">不區分</option> </select> </body> </html> <script src="jquery.min.js" type="text/javascript"></script> <script> function SlectLinkMove() { var TreatmentTypeSelect = $("#virus_findby"); //處理型別1111 var TreatmentResultSelect = $("#cmpResult"); //處理結果 var add_option; var add_value; if(TreatmentTypeSelect.val() == "NoDistinguish"){ $(".target_source_modual").css("display","none"); add_option = ["不區分"]; add_value=["NoDistinguish"] } else if (TreatmentTypeSelect.val() == "Scan") { $(".target_source_modual").css("display","none"); add_option = ["不區分", "aa", "bb", "cc", "dd", "cc", "ee", "ff", "hh"]; add_value=["NoDistinguish","FindVirus","ClearVirus","ClearFail","ReStartClear","ContainClearVirus","DeleteVirus","DeleteFail","ReStartDelete"] } else if (TreatmentTypeSelect.val() == "GFile") { add_option = ["ar", "dd", "rr", "禁止訪問"]; add_value=["NoDistinguish","Delete","Clear","ForbidAccess"]; $(".target_source_modual").css("display",""); } else if (TreatmentTypeSelect.val() == "GWeb") { add_option = ["不區分"]; add_value=["NoDistinguish"] $(".target_source_modual").css("display","none"); } else if (TreatmentTypeSelect.val() == "GSmtp") { add_option = ["不區分"]; add_value=["NoDistinguish"] $(".target_source_modual").css("display","none"); } else if (TreatmentTypeSelect.val() == "GPop3") { add_option = ["不區分"]; add_value=["NoDistinguish"] $(".target_source_modual").css("display","none"); } TreatmentResultSelect.empty(); for (var i = 0; i < add_option.length; i++) { var ot = new Option(); ot.text = add_option[i].split()[0]; ot.value = add_value[i].split()[0] TreatmentResultSelect.append(ot); } } </script>
<option selected value="NoDistinguish">不區分</option> <!--NoDistinguish -->