3级下拉框联动

效果图：

下面看代码：

<!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>

这儿有个地方要注意，在设置初始select时需要给option设置一个默认的选择项，就像这样，否则联动效果出不来。

<option selected value="NoDistinguish">不区分</option> <!--NoDistinguish -->

猜你喜欢