선택 옵션 오버레이를 처리하는 방법
이번에는 선택 옵션 오버레이 처리 방법과 선택 옵션 오버레이를 해결하기 위한 주의사항이 무엇인지 알려드리겠습니다. 다음은 실제 사례인데, 함께 살펴보겠습니다.
layui를 사용 중인데 선택 영역에서 오류가 발생했습니다. 선택 항목의 옵션에 중첩 문제가 있습니다. 이 문제를 해결하고 기능을 달성하기 위해 몇 가지 조사를 했습니다. 동일한 요구 사항을 가진 친구들이 함정에 빠지지 않도록 하세요. 제 소스 코드는 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>layui-下拉框联动测试</title>
<link rel="stylesheet" href="layui/css/layui.css" rel="external nofollow" >
</head>
<body>
<p id="wrap">
<p class="layui-form" lay-filter="merchantForm">
<p class="layui-form-item">
<label class="layui-form-label">选择框</label>
<p class="layui-input-block">
<select name="city" lay-verify="required" id="test1" lay-filter="test1">
<option value="0">时间</option>
<option value="1">金额</option>
</select>
</p>
</p>
<p class="layui-form-item">
<label class="layui-form-label">选择框</label>
<p class="layui-input-block">
<select name="city" lay-verify="required" id="test2" lay-filter="test2">
<option value="">请选择规则名称</option>
</select>
</p>
</p>
</p>
<button id="btn">确定</button>
</body>
<script src="layui/layui.all.js"></script>
<script src="layui/jquery-1.8.3.min.js"></script>
<script>
//后台传过来的数据
var data=[
{unitType:0,ruleName:'时间规则11',amount:1100,money:1100},
{unitType:0,ruleName:'时间规则12',amount:1200,money:1200},
{unitType:0,ruleName:'时间规则13',amount:1300,money:1300},
{unitType:1,ruleName:'金额规则21',amount:2100,money:2100},
{unitType:1,ruleName:'金额规则22',amount:2200,money:2200},
{unitType:1,ruleName:'金额规则23',amount:2300,money:2300},
];
//初始化默认为时间类型以及对应的时间规则
layui.use('form', function(){
var form = layui.form;
$('#test2').html('');
var html='';
$.each(data,function(i,e){
if(e.unitType==0)
html+=`<option data-type="${e.unitType}">${e.ruleName}</option>`;
})
$('#test2').append(html);
form.render('select');
})
//动态二级联动
layui.use('form', function(){
var form = layui.form;
form.on('select(test1)', function(obj){
$('#test2').html('');
var html='';
if(obj.value==0){
$.each(data,function(i,e){
if(e.unitType==obj.value)
html+=`<option data-type="${e.unitType}">${e.ruleName}</option>`;
})
$('#test2').append(html);
}else if(obj.value==1){
$.each(data,function(i,e){
if(e.unitType==obj.value)
html+=`<option data-type="${e.unitType}">${e.ruleName}</option>`;
})
$('#test2').append(html);
}
form.render('select');
});
})
//二级联动完毕后获取对应的规则数据
$('#btn').click(function(){
var thisValue=data.find((v)=>v.ruleName==$('#test2').val());
console.log(thisValue);
})
</script>
</html이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 다른 항목에 주의하세요. PHP 중국어 웹사이트에 관련 기사가 있습니다!
추천 자료:
String.prototype.format 문자열 접합 사용 방법
위 내용은 선택 옵션 오버레이를 처리하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7486
15
1377
52
77
11
51
19
19
39
CPU를 너무 많이 점유하는 WIN10 서비스 호스트의 동작 과정
Mar 27, 2024 pm 02:41 PM
1. 먼저 작업 표시줄의 빈 공간을 마우스 오른쪽 버튼으로 클릭하고 [작업 관리자] 옵션을 선택하거나, 시작 로고를 마우스 오른쪽 버튼으로 클릭한 후 [작업 관리자] 옵션을 선택합니다. 2. 열린 작업 관리자 인터페이스에서 맨 오른쪽에 있는 [서비스] 탭을 클릭합니다. 3. 열린 [서비스] 탭에서 아래의 [서비스 열기] 옵션을 클릭하세요. 4. 열리는 [서비스] 창에서 [InternetConnectionSharing(ICS)] 서비스를 마우스 오른쪽 버튼으로 클릭한 후 [속성] 옵션을 선택하세요. 5. 열리는 속성 창에서 [연결 프로그램]을 [사용 안 함]으로 변경하고 [적용]을 클릭한 후 [확인]을 클릭하세요. 6. 시작 로고를 클릭한 후 종료 버튼을 클릭하고 [다시 시작]을 선택한 후 컴퓨터를 다시 시작합니다.
CSV 파일 조작에 대한 빠른 가이드
Dec 26, 2023 pm 02:23 PM
CSV 형식 파일을 열고 처리하는 방법을 빠르게 배우십시오. 데이터 분석 및 처리의 지속적인 개발로 인해 CSV 형식은 널리 사용되는 파일 형식 중 하나가 되었습니다. CSV 파일은 다양한 데이터 필드가 쉼표로 구분되어 있는 간단하고 읽기 쉬운 텍스트 파일입니다. 학술 연구, 비즈니스 분석, 데이터 처리 등 CSV 파일을 열고 처리해야 하는 상황에 자주 직면하게 됩니다. 다음 가이드는 CSV 형식 파일을 열고 처리하는 방법을 빠르게 배우는 방법을 보여줍니다. 1단계: CSV 파일 형식 이해하기 먼저,
PHP에서 특수 문자를 처리하고 작은따옴표를 변환하는 방법을 알아보세요.
Mar 27, 2024 pm 12:39 PM
PHP 개발 과정에서 특수 문자를 처리하는 것은 일반적인 문제이며, 특히 문자열 처리에서는 특수 문자가 이스케이프되는 경우가 많습니다. 그중에서도 특수 문자를 작은따옴표로 변환하는 것은 상대적으로 일반적인 요구 사항입니다. 왜냐하면 PHP에서는 작은따옴표가 문자열을 래핑하는 일반적인 방법이기 때문입니다. 이 기사에서는 PHP에서 특수 문자 변환 작은따옴표를 처리하는 방법을 설명하고 구체적인 코드 예제를 제공합니다. PHP에서 특수 문자에는 작은따옴표('), 큰따옴표("), 백슬래시() 등이 포함되지만 이에 국한되지는 않습니다.
C# 개발에서 XML 및 JSON 데이터 형식을 처리하는 방법
Oct 09, 2023 pm 06:15 PM
C# 개발에서 XML 및 JSON 데이터 형식을 처리하려면 특정 코드 예제가 필요합니다. 최신 소프트웨어 개발에서는 XML과 JSON이 널리 사용되는 두 가지 데이터 형식입니다. XML(Extensible Markup Language)은 데이터를 저장하고 전송하는 데 사용되는 마크업 언어인 반면, JSON(JavaScript Object Notation)은 경량 데이터 교환 형식입니다. C# 개발에서는 XML 및 JSON 데이터를 처리하고 조작해야 하는 경우가 많습니다. 이 기사에서는 C#을 사용하여 이 두 가지 데이터 형식을 처리하고 첨부하는 방법에 중점을 둘 것입니다.
Select Channels의 비동기 처리 방법 golang을 이용한 Go 동시 프로그래밍
Sep 28, 2023 pm 05:27 PM
golang을 사용한 SelectChannelsGo 동시 프로그래밍의 비동기 처리 방법 소개: 동시 프로그래밍은 현대 소프트웨어 개발에서 중요한 영역으로, 애플리케이션의 성능과 응답성을 효과적으로 향상시킬 수 있습니다. Go 언어에서는 채널 및 Select 문을 사용하여 동시 프로그래밍을 간단하고 효율적으로 구현할 수 있습니다. 이 기사에서는 SelectChannelsGo 동시 프로그래밍의 비동기 처리 방법에 golang을 사용하는 방법을 소개하고 구체적인 내용을 제공합니다.
win7에서 win10으로의 업그레이드가 실패한 후 문제를 해결하는 방법은 무엇입니까?
Dec 26, 2023 pm 07:49 PM
우리가 사용하는 운영 체제가 win7인 경우 일부 친구는 업그레이드할 때 win7에서 win10으로 업그레이드하지 못할 수도 있습니다. 편집자는 문제가 해결될 수 있는지 확인하기 위해 다시 업그레이드를 시도해 볼 수 있다고 생각합니다. 자세한 내용은 편집자가 어떻게 했는지 살펴보겠습니다~ win7이 win10으로 업그레이드하지 못한 경우 방법 1: 1. 먼저 드라이버를 다운로드하여 컴퓨터를 Win10으로 업그레이드할 수 있는지 평가하는 것이 좋습니다. 업그레이드 후 드라이버 테스트를 이용하여 드라이버에 이상이 있는지 확인하고 원클릭으로 수정하세요. 방법 2: 1. C:\Windows\SoftwareDistribution\Download 아래의 모든 파일을 삭제합니다. 2.win+R 실행 "wuauclt.e
C#의 예외 처리 및 오류 로깅 기술
Oct 08, 2023 am 11:51 AM
C#의 예외 처리 및 오류 로깅 기술 소개: 소프트웨어 개발 프로세스에서 예외 처리 및 오류 로깅은 매우 중요한 연결 고리입니다. C# 개발자의 경우 예외 처리 기술과 오류 로깅 방법을 익히면 코드를 더 효과적으로 추적 및 디버그하고 프로그램의 안정성과 유지 관리 가능성을 향상시키는 데 도움이 될 수 있습니다. 이 문서에서는 C#의 일반적인 예외 처리 기술을 소개하고 독자가 예외 처리 및 오류 로깅을 더 잘 이해하고 적용하는 데 도움이 되는 특정 코드 예제를 제공합니다. 1. 예외 처리의 기본 개념 예외는 다음을 참조합니다.
PHP 개발 시 다중 언어 및 국제화 문제를 처리하는 방법
Oct 09, 2023 pm 04:24 PM
PHP 개발에서 다국어 및 국제화 문제를 처리하려면 구체적인 코드 예제가 필요합니다. 인터넷의 발전으로 인해 다국어 및 국제화에 대한 사람들의 요구가 점점 더 높아지고 있습니다. PHP 개발에 있어서 다국어 문제와 국제화 문제를 어떻게 효과적으로 처리하는가는 개발자가 해결해야 할 중요한 과제가 되었습니다. 문자 인코딩 처리 PHP 개발에서는 먼저 문자 인코딩이 올바르게 처리되는지 확인해야 합니다. 다중 언어 환경에서는 UTF-8 인코딩을 사용하는 것이 가장 일반적인 선택입니다. PHP 파일의 헤드에 다음 코드를 추가할 수 있습니다: header('C
