<div style="display:none" id="actual_ralationship"> <div class="form-group"> <label class="col-sm-2 control-label" style="padding-right: 8px;padding-left: 8px;">最多紧急联系人数量</label> <div class="col-sm-2"> <input type="text" class="form-control" name="emergency_contact_max_number" value="3"> </div> </div> <div class="row" id="relationship_div"> <label class="col-sm-2 control-label" style="padding-right: 8px;padding-left: 8px;">必填紧急联系人限制</label> <div class="form-inline"> 关系 <select class="form-control" name="relationship[]"> <?php foreach($relation_ships as $relationship) {?> <option value="<?= $relationship ;?>"><?= $relationship ;?></option> <?php }?> </select> 数量 <input type="text" class="form-control" name="emergency_contact_limit_number[]" value="1"> <button type="button" id="add_element" class="btn btn-default">+</button> </div> </div> </div> <script type="text/javascript"> $(function(){ // 紧急联系人添加事件 $("#add_element").click(function() { var item_relationship = '<div class="form-inline">\n' + '<label class="col-sm-2 control-label" ></label>\n' + ' 关系 \n' + ' <select class="form-control" name="relationship[]">\n' + ' <?php foreach($relation_ships as $relationship) {?>\n' + ' <option value="<?= $relationship ;?>"><?= $relationship ;?></option>\n' + ' <?php }?>\n' + ' </select> \n' + ' 数量 \n' + ' <input type="text" class="form-control" name="emergency_contact_limit_number[]" value="1"> \n' + ' <button type="button" class="btn btn-default disappear_element" οnclick="disappearElement($(this))" >-</button>\n' + ' </div>'; $('#relationship_div').append(item_relationship); }); }); // 紧急联系人关系删减事件 function disappearElement(that) { $(that).parent().remove(); } // api ui 接入对紧急联系人的影响 $(":radio[name=source]").change(function(){ if ($(this).val() === 'api') { $("#actual_ralationship").css('display', 'block'); } else { $("#actual_ralationship").css('display', 'none'); } }); // 联系人页面的触发紧急联系人是否显示 $(":radio[name=contactor_page]").change(function(){ // radio的选中与否都是初始化的时候定下的 if ($(this).val() === 'Y') { $("#actual_ralationship").css('display', 'block'); } else { $("#actual_ralationship").css('display', 'none'); } }); function radioControlRelation(that) { if ($(that).val() === 'Y') { $("#actual_ralationship").css('display', 'block'); } else { $("#actual_ralationship").css('display', 'none'); } } </script>