관리 메뉴

Life is like a Wolf

자바스크립트 select 셀렉트박스 onchange 이벤트 본문

스크립트언어 및 웹 관련/Javascript

자바스크립트 select 셀렉트박스 onchange 이벤트

돌아온 Daos 2018.06.17 17:54

자바스크립트 select element (셀렉트박스)



1. select element 만들고 onchange 이벤트 발생 시 호출 된 함수 등록


<select name="ITEM_LIST" id="ITEM_ID" class="text ui-widget-content ui-corner-all"             style="width: 300px; height: 30px;" onchange="changeItem()">
<option value="test1" selected disabled>테스트1</option>
<option value="test2">테스트2</option>
</select>




2. select element 변경 이벤트 발생 시 호출될 함수

function changeItem(){
var itemidSelect = document.getElementById("ITEM_ID");
// select element에서 선택된 option의 value
var itemID = itemidSelect.options[itemidSelect.selectedIndex].value;
console.log('itemID: '+ itemID);
// select element에서 선택된 option의 text
var itemName = itemidSelect.options[itemidSelect.selectedIndex].text;
console.log('itemName: '+ itemName);
}



결과


value는 option의 value값 (test1, test2)가 저장

text는 option의 내용 (테스트1, 테스트2)가 저장



element를 등록해두고 jQuery로 호출 후


option 등록을 서버로부터 입력받아서도 사용함.


ex)

jQuery.ajax({
url: "http://~~~~~~~~/Users/getItemList",
method: "POST",
data: { input1, input2, input3 },
dataType: "json",
success: function (res) {
item = res.data;
},
async: false
});

var selectItems = [];
$('#ITEM_ID').append($('<option value="'+'0'+'">' + '전체' + '</option>'));
sitelist = $.map(item,function (p, c) {
var obj = {};
obj.label = p.NAME;
obj.value = p.ITEM_ID;
selectItems.push(obj);
$('#ITEM_ID').append($('<option value="' + p.ITEM_ID + '">' + p.NAME + '</option>'));
});


0 Comments
댓글쓰기 폼