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

이제 드롭다운 메뉴를 클릭하여 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의 텍스트를 가져와 입력 상자의 값에 할당합니다. 아래에 표시됩니다.

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

관련 기사:

vue에서 cli 요청 프록시 및 프로젝트 패키징 문제를 사용하는 방법

vue-cli의 웹팩 템플릿을 사용하여 프로젝트 구성 및 패키징 경로 문제 해결

vue 이벤트 센터의 버스 글로벌( 자세한 튜토리얼)

Angular 시리즈의 변경 감지 문제에 대한 자세한 해석

Bootstrap 4에서 자신만의 색상과 스타일을 사용자 정의하는 문제를 해결하는 방법은 무엇입니까?

모달 박스 구현을 위한 Vue(일반 작성 방법)

D3.js에서 동적 진행률 표시줄 구현 방법

Vue에서 대화 상자 팝업 상자 구현 방법

관련 대화 상자 element ui el-dialog 종료 이벤트(자세한 튜토리얼)

위 내용은 JS에서 클릭 투 드롭다운 메뉴 콘텐츠 동기화 입력 상자 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!