내가 참고하기 위한 개발참고 블로그

[jquery] select  box 선택값 가져오기

// select box ID로 접근하여 선택된 값 읽기
$("#셀렉트박스ID option:selected").val();

// select box Name로 접근하여 선택된 값 읽기
$("select[name=셀렉트박스name]").val();

// 같은 방식으로 span과 같은 다른 태그도 접근 가능하다~
$("span[name=셀렉트박스name]").text();

// 선택된 값의 index를 불러오기
var index = $("#셀렉트박스ID option").index($("#셀렉트박스ID option:selected"));

// 셀렉트 박스에 option값 추가하기
$("#셀렉트박스ID").append("<option value='1'>1번</option>");

// 셀렉트 박스 option의 맨앞에 추가 할 경우
$("#셀렉트박스ID").prepend("<option value='0'>0번</option>");

// 셀렉트 박스의 html 전체를 변경할 경우
$("#셀렉트박스ID").html("<option value='1'>1차</option><option value='2'>2차</option>");

// 셀렉트 박스의 index별로 replace를 할 경우
// 해당 객체를 가져오게 되면, option이 다수가 되므로 배열 객체가 되어 eq에 index를 넣어 개별 개체를 선택할 수 있다.
$("#셀렉트박스ID option:eq(1)").replaceWith("<option value='1'>1차</option>");

// 직접 index 값을 주어 selected 속성 주기
$("#셀렉트ID option:eq(1)").attr("selected", "selected");

// text 값으로 selected 속성 주기
$("#셀렉트ID")val("1번").attr("selected", "selected");

or

$("#id").text("1번").attr("selected", "selected");

// value 값으로 selected 속성 주기
$("#셀렉트ID").val("1");

or

$("#id").val("1").prop("selected", true);

// 해당 index item 삭제하기
$("#셀렉트ID option:eq(0)").remove();

// 첫번째, 마지막 item 삭제하기
$("#셀렉트ID option:first").remove();
$("#셀렉트ID option:last").remove();

// 선택된 옵션의 text, value 구하기
$("#셀렉트ID option:selected").text();
$("#셀렉트ID option:selected").val();

// 선택된 옵션의 index 구하기
$("#셀렉트ID option").index($("#셀렉트ID option:selected"));

// 셀렉트박스의 아이템 갯수 구하기
$("#셀렉트ID option").size();

// 선택된 옵션 전까지의 item 갯수 구하기
$("#셀렉트ID option:selected").prevAll().size();

// 선택된 옵션 후의 item 갯수 구하기
$("#셀렉트ID option:selected").nextAll().size();

// 해당 index item 이후에 option item 추가 하기
$("#셀렉트ID option:eq(0)").after("<option value='3'>3번</option>");

// 해당 index item 전에 option item 추가하기
$("#셀렉트ID option:eq(3)").before("<option value='2'>2번</option>");

// 해당 셀렉트 박스에 change event binding 하기
$("#selectID").change(function() {
alert($(this).val());
alert($(this).children("option:selected").text());
});

[jquery] select  box 선택값 가져오기

출처 : https://oingbong.tistory.com/175

브라우저 객체를 찾지 못할 때

JQuery 3.x.x 버전 대는 브라우저 객체를 사용하지 않아 생기는 오류

(JQuery 1.9 버전부터 삭제됨, 하단 링크 참조)

아래 코드는 없는 브라우저 객체를 생성하는 코드

<script>
jQuery.extend({  
    browser: function(){  
        var  
        rwebkit = /(webkit)\/([\w.]+)/,  
        ropera = /(opera)(?:.*version)?[ \/]([\w.]+)/,  
        rmsie = /(msie) ([\w.]+)/,  
        rmozilla = /(mozilla)(?:.*? rv:([\w.]+))?/,      
        browser = {},  
        ua = window.navigator.userAgent,  
        browserMatch = uaMatch(ua);  
  
        if (browserMatch.browser) {  
            browser[browserMatch.browser] = true;  
            browser.version = browserMatch.version;  
        }
	
        return { browser: browser };  
    },  
});
</script>

출처 : 오류 찾는 과정에서 도저히 못찾아서, 선임 개발자님 설명해주셨음

참조링크 : https://api.jquery.com/jQuery.browser/#jQuery-browser1

// S: 페이지에서 이미 name="app_time" input radio가 있어서 클릭 이벤트 발생시
$("input[name='app_time']").click(function(){
	$('input[name="app_time"]').not(target).prop("checked", false);
})
// E: 페이지에서 이미 name="app_time" input radio가 있어서 클릭 이벤트 발생시

// S: 페이지에 클릭 이벤트 설정 name="app_time" input radio를 클릭했을 때
$(document).on("click", "input[name='app_time']", function(){
	$('input[name="app_time"]').not(target).prop("checked", false);
})
// E: 페이지에 클릭 이벤트 설정 name="app_time" input radio를 클릭했을 때

// S:사용자가 선택한 input radio 외에 체크풀기
function selTime (target){
	$('input[name="app_time"]').not(target).prop("checked", false);
}
// E:사용자가 선택한 input radio 외에 체크풀기

보통 한 form 안에서 중복되는 name의 input radio의 경우

중복되지 않도록 체크되지만

여러개의 form을 사용하고 input radio의 name이 중복되는 값이 있으면

중복체크가 되지 않는다.

예)

<form id="apply_form_1" name="apply_form" method="post" action="">
	<input type="radio" name="app_time" value= "1">
    	<input type="radio" name="app_time" value= "2">
</form>

<form id="apply_form_2" name="apply_form" method="post" action="">
	<input type="radio" name="app_time" value= "1">
    	<input type="radio" name="app_time" value= "2">
</form>

처음부터 form을 중복으로 쓰지 않으면 될 것을......

중복으로 쓰는 경우가 있으니 알아두면 좋을 것 같습니다.

출처 : 나의 시행착오와 선임 개발자님이 가르쳐준 내용

<input type="checkbox" name="multi_chk" value="red" /><br>
<input type="checkbox" name="multi_chk" value="blue" /><br>
<input type="checkbox" name="multi_chk" value="white" /><br>

<input type="checkbox" name="multi_chk[]" value="red" /><br>
<input type="checkbox" name="multi_chk[]" value="blue" /><br>
<input type="checkbox" name="multi_chk[]" value="white" /><br>

<script type="type/javascript">
function multiple_check(){
	var multiple_chk = new Array();
	
    // 주석부분은 버전 차이로 되기도 하고 안되기도 하는 것 같습니다.
    // 주석한 코드도 되는 것 확인했습니다.
    // $("input:checkbox[name=multi_chk[]]:checked").each(function(){
	$("input:checkbox[name=multi_chk]:checked").each(function(){
		multiple_chk.push($(this).val());
	});
    
    alert(multiple_chk);
    return;
}
</script>

실무에서 자주 사용해서 참고하려고 남겼습니다.

출처 : https://zxchsr.tistory.com/106