根据select下拉框值判断当前选中的是哪个区域，并且判断当前选中区域里面的值是否为空，如果为空，则弹出弹框提示，请输入xx区域名称，以下只是一个小demo,随手复制黏贴到代码里面，能看的更加明白。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title></title> <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> </style> </head> <body> <form id="dialogForm" class="form-horizontal"> <div class="row"> <div class="col-md-4 col-sm-4"> <div class="row"> <div class="col-md-12 col-sm-12 col-xs-12"> <div class="form-group"> <label class="col-md-4 col-sm-4 col-xs-4 control-label">围栏类型 <em style="color: red;">*</em> </label> <div class="col-md-7 col-sm-7 col-xs-7"> <select size="1" name="type" id="type" class="form-control select2"> <option value="1">统计区域</option> <option value="2">滞留区域</option> <option value="3">危险区域</option> </select> </div> </div> </div> </div> <!-- 统计区域 --> <div id="shouhou1"> <div class="row"> <div class="col-md-12 col-sm-12 col-xs-12"> <div class="form-group"> <label class="col-md-4 col-sm-4 col-xs-4 control-label">统计区域名称 <em style="color: red;">*</em></label> <div class="col-md-7 col-sm-7 col-xs-7"> <input type="text" class="form-control " id="areaname1"> <div class="areacont">请输入区域名称</div> </div> </div> </div> </div> </div> <!--滞留区域--> <div id="shouhou2" style="display: none;"> <div class="row"> <div class="col-md-12 col-sm-12 col-xs-12"> <div class="form-group"> <label class="col-md-4 col-sm-4 col-xs-4 control-label">滞留区域名称</label> <div class="col-md-7 col-sm-7 col-xs-7"> <input type="text" class="form-control " id="areaname2"> </div> </div> </div> </div> </div> <!--危险区域--> <div id="shouhou3" style="display: none;"> <div class="row"> <div class="col-md-12 col-sm-12 col-xs-12"> <div class="form-group"> <label class="col-md-4 col-sm-4 col-xs-4 control-label">危险区域名称</label> <div class="col-md-7 col-sm-7 col-xs-7"> <input type="text" class="form-control " id="areaname3"> </div> </div> </div> </div> </div> </div> </div> </form> <button type="button" class="btn blue" id="addBtn">保存</button> </body> <script> /* 下拉框选择 */ $("#type").change(function() { if ($(this).val() == 1) {// 统计 $("#shouhou1").show(); $("#shouhou2").hide(); $("#shouhou3").hide(); Dbtype = 'region_fence'; } else if ($(this).val() == 2) {// 滞留 $("#shouhou2").show(); $("#shouhou1").hide(); $("#shouhou3").hide(); Dbtype = 'detain_fence'; } else if ($(this).val() == 3) {// 危险 $("#shouhou3").show(); $("#shouhou1").hide(); $("#shouhou2").hide(); Dbtype = 'danger_fence'; } // 清空字段 clearValues(); }) $("#addBtn").on("click", function() { var typeVal = $('#type').val() // 特殊部分检验 if(typeVal === '1'){ // 执行统计区域校验 if(!$('#areaname1').val()){ // 如果这个值为空 ！空就是true就会执行 return alert('请输入统计区域名称') } }else if(typeVal === '2'){ // 执行统计滞留区域 if(!$('#areaname2').val()){ return alert('请输入滞留区域名称') } }else if(typeVal === '3'){ // 执行统计危险区域 if(!$('#areaname3').val()){ return alert('请输入危险区域名称') } } // 公用部分检验 }) </script> </html>
