부트스트랩 드롭박스 선택값 가져오는 질문이요

Question

<div class="dropdown"> <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown link </a> <div class="dropdown-menu" aria-labelledby="dropdownMenuLink" id="value"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div>

이런 코드에서

action을 선택하면 선택한 action값이 Dropdown link 자리에 들어가게 만들고 싶습니다.

그리고 선택한 값을 변수에 저장하려고 하는데

$('#value> a').on('click', function() { // 사용자가 선택한 a 태그의 값을 Dropdow link 자리에 넣기 $('#dropdownMenuLink').text($(this).text()); // 선택된 항목 값(value) 얻기 var name = $(this).text(); });

이렇게 했거든요 이거 맞는지 봐주세요

셀랙트박스처럼 움직였음 좋겠는데..

Answer 1

안녕하세요.

해당 소스는 동작이 잘 되는 거라 수정할 부분이 없네요.

dropdown 컴포넌트는 select box를 완전히 대체할 순 없지만 키보드 상/하 key에 위/아래 항목을 가리킬 수 있으며, esc key를 누르면 선택 팝업 목록이 감춰집니다.

select box 디자인을 크게 신경쓰지 않는다면 그냥 select 태그를 사용하시는 것도 좋은 방법입니다.