셀렉트 박스 값 변경시 바로 확인?
본문
지도 검색을 사용중인데,
셀렉트박스에서 '부산'을 선택후 '확인'버튼을 누르면 게시글 목록중 카테고리가 '부산'인것만 나오고 있습니다.
이 동작에서 '확인' 버튼 누르는 과정을 없앨 수 있나요.
셀렉트박스에서 '부산'만 선택하면 바로 리스트가 바뀌게 가능한지 궁금합니다.
답변 2
셀렉트박스에서 '부산'을 선택후 '확인'버튼을 누르면<===버튼을 누르면 어떤 실행을 하는지 코드가 있어야....
다음처럼 onchange를 넣으면 됩니다
< select onchange="if( this.value) 셀렉트박스에서 '부산'을 선택후 '확인'버튼을 누르면 실행하는코드 "
onchange="if( this.value) this.form.submit()"
onchange="if( this.value) myfunction()"
아래의 코드를 한번 참고를 해보세요..
<form id="searchForm" method="GET" action="your_search_page.php">
<select name="region" id="regionSelect">
<option value="">전체</option>
<option value="부산">부산</option>
<option value="서울">서울</option>
<!-- 다른 옵션들 -->
</select>
</form>
<script>
document.getElementById('regionSelect').addEventListener('change', function() {
document.getElementById('searchForm').submit();
});
</script>
<select name="region" id="regionSelect">
<option value="">전체</option>
<option value="부산">부산</option>
<option value="서울">서울</option>
<!-- 다른 옵션들 -->
</select>
<div id="resultList">
<!-- 결과 리스트가 여기에 표시됩니다 -->
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#regionSelect').on('change', function() {
var selectedRegion = $(this).val();
$.ajax({
url: 'search.php',
method: 'GET',
data: { region: selectedRegion },
success: function(response) {
$('#resultList').html(response);
}
});
});
});
</script>
