머털&보약의 기록

개발컨셉은 아래와 같다. 개발 컨셉 셀렉트박스 2개 존재 - 광역지자체 - 기초지자체 페이지 로드 후에는 광역지자체 데이터만 있는 상태고 기초지자체 데이터는 없는 상태 광역지자체 선택 시 해당 코드에 해당되는 기초지자체 데이터가 기초지자체 selectbox에 세팅됨 광역지자체에서 다시 선택을 누르면 기초지자체는 다시 데이터 초기화됨 지자체 선택 후 검색 이벤트 발생 시 선택한 광역지자체, 기초지자체코드가 selected됨 script $(document).ready(function () { //광역지자체코드 세팅 cf_L_inst_option('serachInstL'); //검색한 광역 지자체코드(jsp라서 jstl 문법 사용) var serachUpperInstL = ''; if (serachUpper..

목차 거창할 건 없고 매개변수로 넘긴 문자열 앞에 "#"를 붙여서 아이디 선택자로 만들어서 처리한다. 소스를 보면 바로 이해가 된다. html 상단 탭에 클릭 이벤트를 줬고 2개의 매개변수를 넘긴다. 전체메뉴 인기메뉴 특별메뉴 script 구분자를 받아서 서버로 넘겨서 구분자에 해당되는 데이터를 조회, tartget id명을 받아서 "#"를 붙여 선택자로 처리, 이러면 function 여러개 만들 필요 없이 저 function 하나로 처리가 가능하다.(화면에서 하나의 테이블만 바라보고 테이블에 구분자 컬럼이 있음) 누구나 알고 있을 수 있지만 그래도 메모한다. function getMenuList(gubun, target) { $.ajax({ url: '/info/selectMenuList.do', ty..

상위 선택값에 따라 하위 선택값이 다르게 표시되어야 되는 경우가 있다. 예를 들면 아래와 같은 상황이다. 광역지자체에 따라 그 하위 지자체 목록이 표시 1번 selectbox 선택 데이터를 조건으로 서버에서 데이터를 조회 후 2번 selectbox를 동적으로 그려야 한다. 상위 selectbox에 onchagne() 이벤트를 걸어서 데이터 변경이 감지될 때마다 서버에서 데이터를 가져와서 하위 selectbox의 option값을 그린다. 관리 광역지자체 관리 기초지자체 전체 function fn_get_LocalGovInstCode(){ //광역지자체코드 var selectedValue = $("#mngWideAreaLocgovCd").val(); $.ajax({ url: '/locgov/selectLoc..

테이블의 th의 체크박스 선택 시 tbody의 td의 checkbox를 전체 체크하는 간단한 예제다. 번호 성명 아이디 function fn_chkAll(obj){ if($(obj).is(':checked')){ $('#targetBody').find('input:checkbox[id^=checkbox]').prop('checked', true); }else{ $('#targetBody').find('input:checkbox[id^=checkbox]').prop('checked', false); } }

부모창에서 자식창을 아래처럼 팝업으로 열었음(html 코드는 생략) parent.html //버튼 클릭 시 child라는 팝업 호출 $("#btn").on("click", function() { //팝업 호출(openPopUp()이라는 공통함수에서는 팝업 호출한다고 가정) const popup = openPopUp("/child", 1100, 700, "child"); }); //자식 팝업에서 호출하는 함수(자식창에서 넘어온 사업자번호, 고객명을 부모의 필드에 적용) function chooseClient(clientBizNo, clientNm) { $("#clientBizNo").val(clientBizNo); $("#projClientNm").val(clientNm); } child.html /** ..

목차 jQuery 정규표현식 이용해서 키보드 입력값 제한 사용자가 입력한 값을 체크해서 알림창을 띄우거나 할 때 jQuery의 keyup()을 사용하면 됨 keyup 이벤트는 키보드의 키를 눌렀다 뗄 때 이벤트를 발생 시킴 해당 이벤트는 포커스를 가질 수 있는 요소에만 발생 시킬 수 있음(ex : input) 대부분의 form 요소들에서 사용가능하다고 함 ex) 사용자가 입력한 값이 한글이 아닌 값일 경우를 체크해서 경고창을 띄우는 코드 예시 // 정규표현식 -> 한글만 입력 체크 function check_input() { $("#item").keyup(function() { // 입력값에 숫자, 영문, 특수문자가 올 경우 경고창 표시 후 ""으로 치환 var regexp = /[a-z0-9]|[ \[..

목차 [jQuery]selectBox change selectBox의 값이 변경될 때마다 placeholder를 변경하는 예제 $(document).ready(function() { $("#selectBox").change( function() { let val = $("#selectBox option:selected").val(); switch(val) { case '1' : $("#input1").attr("placeholder", "사용자"); break; case '2' : $("#input1").attr("placeholder", "연락처"); break; case '3' : $("#input1").attr("placeholder", "이메일"); break; default : $("#input..

목차 버튼 클릭 시 table의 tr영역을 숨김처리하는 예제 // 체크박스가 체크 되어 있으면 table tr display none처리 예제 function check() { $("#ch").change(function(){ if($("#ch").is(":checked")){ $("tr#one").css("display", ""); $("tr#two").css("display", ""); }else{ $("tr#one").css("display", "none"); $("tr#two").css("display", "none"); } }); } "$(#ch)"에 change이벤트를 줬고 체크여부를 체크해서 조건처리한 간단한 예제 내용이 너무 간단하긴 하다.

목차 내가 나중에 찾아보기 위해 기록함 참조 : 기록하는 동구, "2020.02.03", https://donggu1105.tistory.com/22

목차 [jQuery]radio/checkbox 체크 여부 확인 라디오 버튼 체크 여부 확인 체크된 값의 길이 유무로 체크하는 방법(물론 다른 방법도 있음) // name이 radio인 라디오 버튼 체크 여부 확인 예제 if($(':radio[name="radio"]:checked').length < 1){ alert('라디오버튼을 체크 해주세요.\n안그러면 못넘어 갑니다!!!!!!!'); // 첫번 째 라디오버튼에 포커스 $(':input:radio[name=radio]:eq(0)').focus(); return false; } 체크박스 체크 여부 확인1 // name이 checkbox인 체크박스 체크 여부 확인 예제 if($(':radio[name="checkbox"]:checked').length <..