Layui에서 선택 항목을 설정하는 방법

layui에서 선택 항목을 설정하는 방법: 먼저 HTML 샘플 파일을 만든 다음 ajax를 통해 배경에서 선택 가능한 요소를 요청하고 마지막으로 dl 아래의 특정 dd 요소를 클릭하여 선택 이벤트를 실현합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템,layui 버전 1.0 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

추천: "javascript basic tutorial" "layUI tutorial"

1. 수요 시나리오 분석

사용자가 특정 활동의 정보를 변경해야 하는 경우 A 필드를 선택해야 합니다. 드롭다운 상자. 사용자가 팝업 대화 상자를 수정하기 위해 클릭하면 기존 활동 정보가 채워져야 하며 필드 A의 기존 값이 자동으로 선택됩니다.

2. 레이이의 선택 드롭다운 상자는 어떻게 구현되나요?

표준으로 제공되는 선택 드롭다운 상자를 얻으려면 html에 다음 내용을 입력해야 합니다.

<div class="layui-form-item">
 <label class="layui-form-label"><span class="color-red">* </span>发送对象：</label>
 <div class="layui-input-inline">
  <select id="edit_exam_school">
   <option value="">请选择</option>
   <option value="1">华南理工大学大学城</option>
   <option value="2">华南理工大学五山校区</option>
   <option value="3">中山大学珠海校区</option>
   <option value="4">中山大学大学城校区</option>
  </select>
 </div>
</div>

렌더링 결과는 무엇인가요? 위의 HTML 중 Layui가 작성한 내용은 무엇입니까?

여기서 선택할 수 있는 요소는 ajax를 통한 백그라운드 요청에서 얻어지며, 어떤 것을 선택할지는 동적 결과에 따라 결정되어야 합니다. 렌더링 결과의 구조를 분석하면 다음과 같은 DOM 트리를 얻을 수 있습니다.

select 외에도layui-input-inline 아래에layui-form-select라는 div가 추가로 있는 것으로 확인되었습니다. 이 div에는 두 개의 하위 요소인layui-select-title과 dl이 포함되어 있습니다. select의 선택 이벤트는 dl 아래의 특정 dd 요소를 클릭하여 수행할 수 있습니다.

3. 자동 선택을 구현하는 방법은 무엇입니까?

위의 분석 결과에서 우리가 선택하려는 콘텐츠가 있는 dd 요소를 가져와서 해당 요소에 대한 클릭 이벤트를 트리거하면 선택 항목이 로드될 때 자동 선택 작업이 실현될 수 있음을 알 수 있습니다.

먼저 자동 선택을 위해 설정해야 할 요소를 결정하기 위해 누워 값을 사용해야 합니다.

var select = 'dd[lay-value=' + data.schoolId + ']';

자동 선택을 달성하려면 클릭 이벤트를 트리거하세요

$('#edit_exam_school').siblings("div.layui-form-select").find('dl').find(select).click();

위 내용은 Layui에서 선택 항목을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!