웹 프론트엔드 JS 튜토리얼 선택 옵션 오버레이 문제

선택 옵션 오버레이 문제

Mar 28, 2018 pm 05:37 PM
option select 질문

이번에는 셀렉트 옵션 오버레이 문제를 가져오겠습니다. 셀렉트 옵션 오버레이 문제를 해결하기 위한 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다. 에디터님은 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 중국어 웹사이트의 다른 관련 기사도 주목해주세요!

추천 자료:

vue에서 xe-utils를 사용하는 방법


vue-router가 빌드될 때 라우팅 페이지가 표시되지 않는 문제를 해결하는 방법

위 내용은 선택 옵션 오버레이 문제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

클러스터링 알고리즘의 클러스터링 효과 평가 문제 클러스터링 알고리즘의 클러스터링 효과 평가 문제 Oct 10, 2023 pm 01:12 PM

클러스터링 알고리즘에서 클러스터링 효과 평가 문제에는 특정 코드 예제가 필요합니다. 클러스터링은 데이터를 클러스터링하여 유사한 샘플을 하나의 범주로 그룹화하는 비지도 학습 방법입니다. 클러스터링 알고리즘에서는 클러스터링의 효과를 어떻게 평가하는가가 중요한 문제입니다. 이 기사에서는 일반적으로 사용되는 몇 가지 클러스터링 효과 평가 지표를 소개하고 해당 코드 예제를 제공합니다. 1. 클러스터링 효과 평가 지수 실루엣 계수 실루엣 계수는 표본의 근접성 및 다른 클러스터와의 분리 정도를 계산하여 클러스터링 효과를 평가합니다.

일반적인 iPhone 문제를 진단하는 방법을 가르쳐주세요. 일반적인 iPhone 문제를 진단하는 방법을 가르쳐주세요. Dec 03, 2023 am 08:15 AM

강력한 성능과 다재다능한 기능으로 잘 알려진 iPhone은 복잡한 전자 장치에서 흔히 발생하는 문제인 가끔씩 발생하는 문제나 기술적인 어려움으로부터 자유롭지 않습니다. iPhone 문제를 경험하면 실망스러울 수 있지만 일반적으로 알람은 필요하지 않습니다. 이 종합 가이드에서는 iPhone 사용과 관련하여 가장 일반적으로 직면하는 문제 중 일부를 쉽게 설명하는 것을 목표로 합니다. 당사의 단계별 접근 방식은 이러한 일반적인 문제를 해결하는 데 도움을 주고 장비를 최상의 작동 순서로 되돌릴 수 있는 실용적인 솔루션과 문제 해결 팁을 제공하도록 설계되었습니다. 결함이 있거나 더 복잡한 문제에 직면하더라도 이 문서는 문제를 효과적으로 해결하는 데 도움이 될 수 있습니다. 일반적인 문제 해결 팁 특정 문제 해결 단계를 진행하기 전에 다음은 몇 가지 유용한 정보입니다.

Select Channels의 비동기 처리 방법 golang을 이용한 Go 동시 프로그래밍 Select Channels의 비동기 처리 방법 golang을 이용한 Go 동시 프로그래밍 Sep 28, 2023 pm 05:27 PM

golang을 사용한 SelectChannelsGo 동시 프로그래밍의 비동기 처리 방법 소개: 동시 프로그래밍은 현대 소프트웨어 개발에서 중요한 영역으로, 애플리케이션의 성능과 응답성을 효과적으로 향상시킬 수 있습니다. Go 언어에서는 채널 및 Select 문을 사용하여 동시 프로그래밍을 간단하고 효율적으로 구현할 수 있습니다. 이 기사에서는 SelectChannelsGo 동시 프로그래밍의 비동기 처리 방법에 golang을 사용하는 방법을 소개하고 구체적인 내용을 제공합니다.

jQuery가 양식 요소 값을 얻을 수 없는 문제를 해결하는 방법 jQuery가 양식 요소 값을 얻을 수 없는 문제를 해결하는 방법 Feb 19, 2024 pm 02:01 PM

jQuery.val()을 사용할 수 없는 문제를 해결하려면 구체적인 코드 예제가 필요합니다. 프론트 엔드 개발자에게는 jQuery를 사용하는 것이 일반적인 작업 중 하나입니다. 그중에서도 .val() 메서드를 사용하여 양식 요소의 값을 가져오거나 설정하는 것은 매우 일반적인 작업입니다. 그러나 특정한 경우에는 .val() 메서드를 사용하지 못하는 문제가 발생할 수 있습니다. 이 문서에서는 몇 가지 일반적인 상황과 해결 방법을 소개하고 구체적인 코드 예제를 제공합니다. 문제 설명 jQuery를 사용하여 프런트 엔드 페이지를 개발할 때 때때로 다음과 같은 문제가 발생할 수 있습니다.

약한 지도 학습의 라벨 획득 문제 약한 지도 학습의 라벨 획득 문제 Oct 08, 2023 am 09:18 AM

약한 지도 학습의 라벨 획득 문제에는 특정 코드 예제가 필요합니다. 소개: 약한 지도 학습은 훈련에 약한 라벨을 사용하는 기계 학습 방법입니다. 기존 지도 학습과 달리 약한 지도 학습은 각 샘플에 정확한 라벨이 필요한 것이 아니라 모델을 훈련하는 데 더 적은 수의 라벨만 사용하면 됩니다. 그러나 약한 지도 학습에서는 약한 레이블로부터 유용한 정보를 정확하게 얻는 방법이 핵심 문제입니다. 이 기사에서는 약한 지도 학습의 레이블 획득 문제를 소개하고 구체적인 코드 예제를 제공합니다. 약한 지도 학습의 라벨 획득 문제 소개:

jQuery에서 선택 요소의 변경 이벤트 바인딩을 구현하는 방법 jQuery에서 선택 요소의 변경 이벤트 바인딩을 구현하는 방법 Feb 23, 2024 pm 01:12 PM

jQuery는 DOM 조작, 이벤트 처리, 애니메이션 효과 등을 단순화하는 데 사용할 수 있는 인기 있는 JavaScript 라이브러리입니다. 웹 개발에서 우리는 선택 요소에 대한 이벤트 바인딩을 변경해야 하는 상황에 자주 직면합니다. 이 기사에서는 jQuery를 사용하여 선택 요소 변경 이벤트를 바인딩하는 방법을 소개하고 특정 코드 예제를 제공합니다. 먼저 라벨을 사용하여 옵션이 포함된 드롭다운 메뉴를 만들어야 합니다.

머신러닝 모델의 일반화 능력 문제 머신러닝 모델의 일반화 능력 문제 Oct 08, 2023 am 10:46 AM

기계 학습 모델의 일반화 기능에는 특정 코드 예제가 필요합니다. 기계 학습의 개발 및 적용이 점점 더 널리 보급됨에 따라 사람들은 기계 학습 모델의 일반화 기능에 점점 더 많은 관심을 기울이고 있습니다. 일반화 능력은 레이블이 지정되지 않은 데이터에 대한 기계 학습 모델의 예측 능력을 의미하며, 현실 세계에서 모델의 적응성으로도 이해될 수 있습니다. 좋은 머신러닝 모델은 높은 일반화 능력을 갖추고 새로운 데이터에 대해 정확한 예측을 할 수 있어야 합니다. 그러나 실제 응용에서는 훈련 세트에서는 잘 수행되지만 테스트 세트에서는 실패하거나 실제 모델에서 실패하는 모델을 자주 접하게 됩니다.

win11 설치 후 시작메뉴가 안되는 문제 해결 방법 win11 설치 후 시작메뉴가 안되는 문제 해결 방법 Jan 06, 2024 pm 05:14 PM

많은 사용자가 win11 시스템 업데이트를 시도했지만 업데이트 후에 시작 메뉴를 사용할 수 없다는 사실을 발견했습니다. 이는 최신 업데이트에 문제가 있기 때문일 수 있습니다. Microsoft가 문제를 해결하기 위해 이러한 업데이트를 수정하거나 제거할 때까지 기다릴 수 있습니다. 문제를 함께 살펴보겠습니다. win11을 설치한 후 시작 메뉴를 사용할 수 없는 경우 해결 방법 방법 1: 1. 먼저 win11에서 제어판을 엽니다. 2. 그런 다음 프로그램 아래에 있는 "프로그램 제거" 버튼을 클릭합니다. 3. 제거 인터페이스에 들어가서 왼쪽 상단에 있는 "설치된 업데이트 보기"를 찾으세요. 4. 들어간 후에는 업데이트 정보에서 업데이트 시간을 확인하고 모든 최신 업데이트를 제거할 수 있습니다. 방법 2: 1. 또한 업데이트 없이 win11 시스템을 직접 다운로드할 수도 있습니다. 2. 이 제품은 가장 없는 제품입니다.

See all articles