效果图:
下面看代码:
<!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 -->