select박스 option선택
본문
select박스 option선택해서 클릭할때 이벤트를 발생시켜서
html 문을 인쿠르드 시킬려고 하는데 가능할까요?
답변 2
b.html
<h1>b.html</h1>
c.html
<h2>c.html</h2>
a.html
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function () {
$('#combo_01').change(function (e) {
if ($(this).val() == '') {
$('#inc').html('');
} else {
$.ajax({
url: $(this).val(),
type: "GET"
}).done(function (res) {
$('#inc').html(res);
});
}
});
});
</script>
<select id="combo_01">
<option value="">- select -</option>
<option value="b.html">b.html</option>
<option value="c.html">c.html</option>
</select>
<div id="inc"></div>
다음과 같은 방법도 있으니 참고해 보세요
1. HTML 문에서 <select> 요소를 생성
<select id="mySelect">
<option value="page1">페이지 1</option>
<option value="page2">페이지 2</option>
<option value="page3">페이지 3</option>
</select>
2. JavaScript를 사용하여 선택된 옵션에 대한 이벤트 핸들러를 등록
document.getElementById("mySelect").addEventListener("change", function() {
var selectedValue = this.value; // 선택된 옵션의 값
// AJAX 요청을 보내어 해당 페이지의 내용을 가져옵니다.
var xhr = new XMLHttpRequest();
xhr.open("GET", "get_page_content.php?page=" + selectedValue, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var pageContent = xhr.responseText;
// 가져온 페이지 내용을 삽입하거나 처리합니다.
document.getElementById("contentContainer").innerHTML = pageContent;
}
};
xhr.send();
});
답변을 작성하시기 전에 로그인 해주세요.
