집 >웹 프론트엔드 >JS 튜토리얼 >JS에서 클릭 투 드롭다운 메뉴 콘텐츠 동기화 입력 상자 구현

JS에서 클릭 투 드롭다운 메뉴 콘텐츠 동기화 입력 상자 구현

亚连원래의: 2018-06-09 17:51:102355검색

이제 드롭다운 메뉴를 클릭하여 JS를 사용하여 선택한 콘텐츠를 입력 상자에 동기화하는 예를 공유하겠습니다. 이는 좋은 참조 값을 가지고 있으며 모든 사람에게 도움이 되기를 바랍니다.

최근 블로거가 테스트 플랫폼을 작성하면서 Flask를 배우다가 아래 그림과 같은 일반적인 시나리오를 접했습니다

입력 상자 그룹이 있고, 드롭다운 메뉴에 3가지 옵션이 있고, 입력 상자가 있고 코드는 부트스트랩으로 작성되었으며 모든 사람을 위해 코드도 게시되었습니다

<p class="input-group-btn">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    项目名称
    <span class="caret"></span>
   </button>
   <ul id="project" class="dropdown-menu">
    <li value="account"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >account</a></li>
    <li class="pider"></li>
    <li value="drive"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >drive</a></li>
    <li class="pider"></li>
    <li value="qing"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >qing</a></li>
   </ul>
  </p>

제 목적은 이 드롭다운 메뉴에서 옵션을 클릭하면 자동으로 값을 가져와서 채울 수 있다는 것입니다. 이전 버전에서는 입력이 하나뿐이어서 사용자가 직접 입력해야 했습니다. 동기화는 어떻게 하나요? 물론, 모니터링하려면 js를 사용해야 하는데, 비교적 간단합니다.

$("#project").on("click", "li", function(){
 $("#proname").val($(this).text());
});

이 코드의 의미는 ul의 클릭 이벤트를 모니터링하는 것입니다. 개체는 아래의 li 요소입니다. li를 클릭하면 li의 텍스트를 가져와 입력 상자의 값에 할당합니다. 아래에 표시됩니다.

위 내용을 정리했습니다. 앞으로 도움이 되길 바랍니다.

JS에서 클릭 투 드롭다운 메뉴 콘텐츠 동기화 입력 상자 구현

관련 기사