TheFIF
752
2021-01-14 19:49:20
3
91

bootstrap 드롭다운 선택값 가져오기 질문 입니다.


아래와 같은 화면을 드롭다운 메뉴로 만들었습니다.


클릭하면 선택한 값이 들어갑니다.



html 코드입니다.

<button class="btn btn-secondary dropdown-toggle" id="method_status" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Method
      </button>
      <ul id="method_type" class="dropdown-menu" role="menu" aria-labelledby="searchType">
        <li role="presentation">
          <a class="dropdown-item" href="#" value="GET">GET</a>
        </li>
        <li role="presentation">
          <a class="dropdown-item" href="#" value="POST">POST</a>
        </li>
      </ul>


자바스크립트 코드입니다.

$('#method_type li > a').on('click', function () {
	    $('#method_status').text($(this).text());
		httpMethod = $(this).attr('value');
		console.log('선택된 메소드: ' + httpMethod);
});


fuction send() {

 .......

}


이런식으로 send 함수가 있을 때 저 htttpMethod 값을 가져오려면 어떻게 해야할까요?

고수님들 도와주십쇼..!


0
  • 답변 3

  • 킁킁탐정
    464
    2021-01-14 22:02:42

    코드처럼 전역 변수로 대입하셨다면 send() 함수 내에서 httpMethod 변수를 참조하는데 문제가 없습니다.


  • 댄토리
    390
    2021-01-15 12:01:53 작성 2021-01-15 12:04:00 수정됨

    httpMethod를 전역변수로 사용해도되지만,

    그보다는 input hidden 을 하나 선언해두고 on click 이벤트마다 input에 설정하거나

    attribute를 활용하는 방법을 추천드립니다.


    1. input hidden 활용

    <input type="hidden" id="httpMethod" value="">
    <button class="btn btn-secondary dropdown-toggle" id="method_status" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    	Method
    </button>
    <ul id="method_type" class="dropdown-menu" role="menu" aria-labelledby="searchType">
    <li role="presentation">
      <a class="dropdown-item" href="#" value="GET">GET</a>
    </li>
    <li role="presentation">
      <a class="dropdown-item" href="#" value="POST">POST</a>
    </li>
    </ul>
    
    
    $(function () {
    
        function send() {
            var httpMethod = $('#httpMethod').val();
        }
    
        $('#method_type li > a').on('click', function () {
            $('#method_status').text($(this).text());
            var httpMethod = $(this).attr('value');
            console.log('선택된 메소드: ' + httpMethod);
    
            $('#httpMethod').val(httpMethod);
        });    
    });

    2. attribute or data 활용

    <button class="btn btn-secondary dropdown-toggle" id="method_status" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-method="">
    	Method
    </button>
    <ul id="method_type" class="dropdown-menu" role="menu" aria-labelledby="searchType">
    <li role="presentation">
      <a class="dropdown-item" href="#" value="GET">GET</a>
    </li>
    <li role="presentation">
      <a class="dropdown-item" href="#" value="POST">POST</a>
    </li>
    </ul>
    
    
    $(function () {
    
        function send() {
            var httpMethod = $('#method_status').attr('data-method');
            // or // var httpMethod = $('#method_status').data('method');     } $('#method_type li > a').on('click', function () { $('#method_status').text($(this).text()); var httpMethod = $(this).attr('value'); console.log('선택된 메소드: ' + httpMethod); $('#method_status').attr('data-method', httpMethod); // or // $('#method_status').data('method', httpMethod); }); });


  • TheFIF
    752
    2021-01-16 16:09:11

    답변주신 모든분들 정말 감사드립니다!

  • 로그인을 하시면 답변 을 등록할 수 있습니다.