How to solve the option overlay problem of lselect
This time I will show you how to solve the option overlay problem of lselect. What are the precautions to solve the option overlay problem of lselect. The following is a practical case, let's take a look at it together.
The editor is using layui, and I encountered a pitfall in the select area. The value in the select cannot be cleared, and the options in the select have a superposition problem. In order to solve this problem and achieve my function, I After some research, so that friends who have the same needs will not step into the trap, I have posted my source code:
<!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>I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related matters on the PHP Chinese website article!
Recommended reading:
How to deal with the page not rendering when Vue uses the following table to modify the array
How to use node’s static file server
The above is the detailed content of How to solve the option overlay problem of lselect. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
What does option mean in linux documentation?
Mar 07, 2023 am 10:41 AM
In Linux, option refers to a command option, which is a switch that adjusts the command execution behavior. That is, different options determine the display results of the command. Options are divided into long options and short options: 1. Short options are guided by "-". When there are multiple short options, spaces are used to separate each option; 2. Long options are complete words. , and usually cannot be combined.
Is there a future for employment in clinical pharmacy at Harbin Medical University? (What are the employment prospects for clinical pharmacy at Harbin Medical University?)
Jan 02, 2024 pm 08:54 PM
What are the employment prospects of clinical pharmacy at Harbin Medical University? Although the national employment situation is not optimistic, pharmaceutical graduates still have good employment prospects. Overall, the supply of pharmaceutical graduates is less than the demand. Pharmaceutical companies and pharmaceutical factories are the main channels for absorbing such graduates. The demand for talents in the pharmaceutical industry is also growing steadily. According to reports, in recent years, the supply-demand ratio for graduate students in majors such as pharmaceutical preparations and natural medicinal chemistry has even reached 1:10. Employment direction of clinical pharmacy major: After graduation, students majoring in clinical medicine can engage in medical treatment, prevention, medical research, etc. in medical and health units, medical research and other departments. Employment positions: Medical representative, pharmaceutical sales representative, sales representative, sales manager, regional sales manager, investment manager, product manager, product specialist, nurse
How to clean temp folder
Feb 22, 2024 am 09:15 AM
How to clean the temp folder As we use the computer, temporary files (temp files) will gradually accumulate. These temporary files are generated when we use the computer, such as cache files when browsing the web, temporary files during software installation, etc. Failure to clean the temp folder for a long time may occupy a large amount of disk space and affect the speed of the computer. Therefore, cleaning the temp folder regularly is a necessary step to maintain computer performance. Below, we will introduce some simple ways to clean the temp folder. Method 1: Manually clean t
How to download win10 image quickly
Jan 07, 2024 am 11:33 AM
Recently, some friends reported how to download win10 image files. Because there are so many image files on the market, what should I do if I want to find a regular file to download? Today, the editor has brought you the link to download the image and the detailed solution steps. Let’s take a look at them together. win10 image quick download and installation tutorial download link >>> System Home Ghostwin101909 image 64-bit version v2019.11<<<>>>Win10 image 64-bit v2019.07<<<>>>Win10 image 32-bit v2019.07<< <1. Search through the Internet
How to reset Win10 system
Jun 29, 2023 pm 03:14 PM
How to reset Win10 system? Nowadays, many friends like to use computers with Win10 system. However, they will inevitably encounter some unsolvable problems when using computers. At this time, you can try to reset the system. So how should you do it? Let’s follow the editor to watch the tutorial on resetting the Win10 system. Users in need should not miss it. Tutorial on resetting the Win10 system 1. Click Windows and select Settings. 2. Click Update and Security. 3. Select Restore. 4. Click Start on the right to reset this computer. The above is the entire content of [How to reset Win10 system - Tutorial on resetting Win10 system]. More exciting tutorials are available on this site!
How to check win11 computer configuration
Jun 29, 2023 pm 12:15 PM
How to check win11 computer configuration? The win11 system is a very practical computer operating system version. This version provides users with rich functions, allowing users to have a better computer operating experience. So many friends who use computers are curious about their computers. Specific configuration, how to perform this operation in win11 system? Many friends don’t know how to operate in detail. The editor has compiled a tutorial on how to view the win11 computer configuration below. If you are interested, follow the editor and read on! Win11 computer configuration view tutorial 1. Click the windows icon on the taskbar below or press the "windows key" on the keyboard to open the start menu. 2. Find "Settings" or "sett" in the start menu.
Solve the problem of environment detection when reinstalling the system
Jan 08, 2024 pm 03:33 PM
How to solve the problem that the environment test fails when reinstalling the system and needs to be rewritten. The reason is: the mobile phone is poisoned. You can install anti-virus software such as Mobile Manager for anti-virus. 2. Many junk files are stored inside the mobile phone, causing the running memory of the mobile phone to be occupied. Just clear the phone cache to solve this problem. 3. The phone memory is occupied too much by saved software and files. It is no problem to delete unnecessary files and software frequently. As long as your hardware configuration meets the installation requirements, you can use the new one directly. Reinstall the system from the system disk! You can use a USB flash drive or hard disk to install, which is very fast. But the key is to use a system disk with good compatibility (supports installation in IDE, ACHI, and RAID modes), and it can be automatically and permanently activated, which has been verified. so
What does option refer to in linux documentation?
May 16, 2023 am 09:55 AM
In Linux, option refers to a command option, which is a switch that adjusts the command execution behavior. That is, different options determine the display results of the command. Options are divided into long options and short options: 1. Short options are guided by "-". When there are multiple short options, spaces are used to separate each option; 2. Long options are complete words. , and usually cannot be combined. Introduction to command options (options) and parameters in Linux After logging in to Linux, we can enter commands after the # or $ symbol. Sometimes the command will be followed by "options" (English options) or "parameters" (English arguments) . That is, the command format in Linux is: command[opti
