二话不说,直接贴代码,需要的自己去保存为html刷新运行即可看到效果(我引用的是远程jquery,注意使用时在有网的条件下,没有网的自行替换src中引用jquery路径)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>checkbox实现根据选择项不同控制select控件取值</title>
</head>
<body style="height:1200px;" οnlοad="loadhtml();">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("input[type=checkbox]").click(function () {
var valStr = "";
$("input[type=checkbox]:checked").each(function() {
valStr += $(this).val() + ",";
});
if (valStr.length > 0) {
valStr = valStr.substring(0, valStr.length - 1);
}
//$("#checkedValue").val(valStr);
var selectOptionsHtml = "";
if((valStr.indexOf('1') != -1 || valStr.indexOf('4') != -1) && (
valStr.indexOf('2')<0 && valStr.indexOf('3')<0 &&
valStr.indexOf('5')<0 && valStr.indexOf('6')<0
)) {
alert(111);
selectOptionsHtml= "<option value='-1'>请选择</option>"
+"<option value='1'>有效</option>"
+"<option value='2'>无法判断</option>"
+"<option value='3'>无人应答</option>"
+"<option value='4'>关机</option>"
+"<option value='5'>停机/暂停服务</option>"
+"<option value='6'>空号</option>"
+"<option value='7'>通话中/占线</option>"
+"<option value='8'>拒接/先无人应答转提示用户忙</option>"
+"<option value='9'>提示音语音留言</option>"
+"<option value='10'>不在服务区</option>"
+"<option value='11'>号码设置屏蔽</option>"
+"<option value='12'>号码不存在</option>"
+"<option value='13'>号码易主</option>";
}else if((valStr.indexOf('1')<0 && valStr.indexOf('4')<0) && (
valStr.indexOf('2')>-1 || valStr.indexOf('3')>-1 ||
valStr.indexOf('5')>-1 || valStr.indexOf('6')>-1
)){
selectOptionsHtml = "<option value='-1'>请选择</option>"
+"<option value='0'>无效</option>"
+"<option value='1'>有效</option>"
+"<option value='2'>无法判断</option>";
}else{
if('' != valStr && null != valStr){
alert("电话类与非电话类不能同时进行状态判定,请重新勾选。。");
}
selectOptionsHtml = "<option value='-1'>请选择</option>";
}
$("#judgeState_b").html(selectOptionsHtml);
});
});
function loadhtml(){
var table_body = [{changeContent:"xxx",changeUserId:"yyy",createTime:"2018-06-11T11:01:22",isHeadquarters:1},{changeContent:"aaa",changeUserId:"bbb",createTime:"2018-06-13T22:01:22",isHeadquarters:0},{changeContent:"111",changeUserId:"2222",createTime:"2018-06-15T09:01:22",isHeadquarters:0}];
//var table_body = data.borrowRecordHistoryList;
var userType = 4;
if(table_body.length >0){
var table_title = "<tr style='background-color: #b9d8f3;'><td>序号</td><td>变更事项</td><td>变更人</td><td>变更时间</td></tr>";
var j=0;
for (var i = 0; i < table_body.length; i++) {
var th_value = table_body[i];
alert(th_value.changeContent);
if(userType != '3' && userType != 3){
if(th_value.isHeadquarters == 1 || th_value.isHeadquarters == '1'){
continue;
}
}
table_title += "<tr><td style='width: 40px;'>"+(++j)+"</td><td style='width: 300px;'>"
+ th_value.changeContent
+ "</td><td style='width: 95px;'>"
+ th_value.changeUserId
+ "</td><td style='width: 125px;'>"
+ th_value.createTime.replace("T", " ")
+ "</td></tr>";
}
//$('#historyTable').attr("display","block");
$('#historyTable tbody').html('')
$('#historyTable tbody').append(table_title);
$('#showHistoryTable').attr("display","block");
}
}
</script>
<br/>
<br/>
<br/>
<br/>
<div>
选择项:
<input type="checkbox" id="inputMobile" name="inputOptions" value="1">手机
<input type="checkbox" id="inputWX" name="inputOptions" value="2">微信
<input type="checkbox" id="inputAddress" name="inputOptions" value="3">常驻地址
<input type="checkbox" id="inputQSMobile" name="inputOptions" value="4">亲属号码
<input type="checkbox" id="inputIsSS" name="inputOptions" value="5">xxxx
<input type="checkbox" id="inputIsDQ" name="inputOptions" value="6">yyyy
状态:<select id="judgeState_b" name="judgeState_b"><option value="0">请选择</option></select>
</div>
<br/>
<br/>
<br/>
<div id="showInputDialog">
<div id="showHistoryTable" style="overflow-x: hidden;" >
<table id="historyTable" class="history-table" border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr style="background-color: #b9d8f3;">
<td>序号</td>
<td>变更事项</td>
<td>变更人</td>
<td>变更时间</td>
</tr>
</tbody>
</table>
<div style="margin-left: 213px;"></div>
</div>
</div>
</body>
</html>