实现checkbox的click事件,并通过选择不同的项实现控制select控件下拉的值

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

猜你喜欢

转载自blog.csdn.net/wqlinloveruby/article/details/80734801
今日推荐