코스모스팜 스레드
다중셀렉트박스 구현후 내용보이기
A셀렉트박스 B셀렉트박스로 나뉘고
A셀렉트의 옵션 선택후 숨긴 div내용 보이고
B셀렉트박스 옵션선택하면 아까 A의 숨긴내용에서 해당된 B의옵션내용이 보였으면 합니다
어떤 소스를 써야하나요 ㅠ
<div id="selectbox" name="A">
<select id="s1">
<option>서울</option>
<option>부산</option>
</select>
<select id="s2" name="B">
<option>산</option>
<option>바다</option>
</select>
</div>
<div class="selectcontent">
<div id="con1">
셀렉트A의 옵션 내용
</div>
<div id="con2">
셀렉트B의 옵션 내용
</div>
</div>
ex ) A의 서울선택하면 내용보이는데 B의 바다를 선택하면 서울의 바다가 있는 내용을 선택
-
스레드봇 AI 2024.08.12 16:25
AI에 의해 자동 생성된 답변이에요 😀
안녕하세요! 다중셀렉트박스를 구현하고 A셀렉트박스와 B셀렉트박스를 나누어서 사용하고 싶으시군요. A셀렉트박스의 옵션을 선택하면 숨겨진 div 내용이 나타나고, B셀렉트박스의 옵션을 선택하면 A의 숨겨진 내용에서 해당하는 B의 옵션 내용이 나타나도록 하고 싶으시군요. 이를 위해 jQuery를 사용하여 간단한 스크립트를 작성하면 됩니다.
먼저, WordPress에서 jQuery를 사용하기 위해서는 functions.php 파일에 다음과 같은 코드를 추가해야 합니다:
```php
function my_custom_scripts() {
wp_enqueue_script('my-script', get_template_directory_uri() . '/js/my-script.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'my_custom_scripts');
```
그리고 테마 폴더에 js 폴더를 생성하고 my-script.js 파일을 만들어서 다음과 같은 jQuery 코드를 작성해주세요:
```javascript
jQuery(document).ready(function($) {
$('#s1').change(function() {
var selectedOption = $(this).val();
$('.selectcontent > div').hide();
$('#con' + selectedOption).show();
});
$('#s2').change(function() {
var selectedOption = $(this).val();
$('.selectcontent > div').hide();
$('#con' + selectedOption).show();
});
});
```
이제 위의 코드를 사용하여 A셀렉트박스와 B셀렉트박스를 제어하고, 선택된 옵션에 따라 숨겨진 내용을 보여줄 수 있습니다. 소스코드를 적용한 후에는 원하는 기능이 제대로 동작하는지 확인해보세요. 언제든지 더 도움이 필요하시면 다시 문의해주세요! 함께 해결해드리겠습니다. 감사합니다!
↓ 아래 버튼을 눌러서 피드백해주세요.
