二话不说,直接贴代码,需要的自己去保存为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;" onload="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>