lselect的option疊加問題如何解決
這次帶給大家lselect的option疊加問題如何解決，解決lselect的option疊加問題的注意事項有哪些，下面就是實戰案例，一起來看一下。
小編我在使用layui，在select的地方遇到了坑，select裡的值居然無法清空，select裡的option還有疊加問題，為了解決這個問題，也達到我的功能，我研究了下，讓有同樣需求的小伙伴不踩坑，特貼上我的源碼：
<!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中文網其它相關文章！
推薦閱讀：
以上是lselect的option疊加問題如何解決的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
linux文檔中option什麼意思
Mar 07, 2023 am 10:41 AM
在linux中，option是指指令選項，是調整指令執行行為的開關，也就是選項不同決定了指令的顯示結果不同。 option（選項）分為長選項與短選項：1、短選項都是使用「-」引導，當有多個短選項時，各選項之間使用空格隔開；2、長選項都是完整的單字，且通常不能組合。
哈醫大臨床藥學就業是否有前途(哈醫大臨床藥學就業前景怎麼樣)
Jan 02, 2024 pm 08:54 PM
哈醫大臨床藥學就業前景如何儘管全國就業情況不容樂觀，但藥科類畢業生仍有著良好的就業前景。整體來看，藥科類畢業生的供給量少於需求量，各醫藥公司和製藥廠是吸收這類畢業生的主要管道，製藥業對人才的需求也穩定成長。據介紹，近幾年藥物製劑、天然藥物化學等專業的研究生供需比甚至達到1∶10。臨床藥學專業就業方向：臨床醫學專業學生畢業後可在醫療衛生單位、醫學科研等部門從事醫療及預防、醫學科研等方面的工作。就業機會：醫藥代表、醫藥銷售代表、銷售代表、銷售經理、區域銷售經理、招募經理、產品經理、產品專員、護
如何清理temp資料夾
Feb 22, 2024 am 09:15 AM
如何清理temp資料夾隨著我們在電腦上的使用，臨時檔案（temp檔案）會逐漸累積。這些臨時檔案是在我們使用電腦時產生的，例如瀏覽網頁時的快取檔案、軟體安裝時的臨時檔案等。長時間不清理temp資料夾可能會佔據大量磁碟空間，影響電腦運作速度。因此，定期清理temp資料夾是維護電腦效能的必要步驟。下面，我們將介紹清理temp資料夾的一些簡單方法。方法一：手動清理t
win10鏡像如何快速下載
Jan 07, 2024 am 11:33 AM
最近有小夥伴反應win10鏡像檔案該如何下載，因為市面的鏡像檔案多如牛毛，想找到正規的檔案下載，這可怎麼辦呢？今天小編帶來了下載鏡像的鏈接，詳細的解決步驟，具體的一起來看看吧。 win10鏡像快速下載安裝教學下載連結>>>系統之家Ghostwin101909鏡像64位元版v2019.11<<<>>>Win10鏡像64位元v2019.07<<<>>>Win10鏡像32位元v2019.07<< <1、透過網路檢索
如何查看win11電腦配置
Jun 29, 2023 pm 12:15 PM
如何查看win11電腦配置？ win11系統是一款非常實用的電腦作業系統版本，為使用者提供了豐富的功能，讓使用者們能夠有更好的電腦操作體驗，那麼許多使用電腦的小夥伴們都很好奇自己電腦的具體配置，在win11系統中該如何進行這項操作呢？很多小夥伴不知道怎麼詳細操作，小編下面整理了win11電腦配置查看教程，如果你有興趣的話，跟著小編一起往下看看吧！ win11電腦設定查看教學1、點選下方工作列的windows圖示或按下鍵盤「windows鍵」開啟開始功能表。 2、在開始功能表中找到「設定」或「sett
Win10系統如何重置
Jun 29, 2023 pm 03:14 PM
Win10系統如何重置？現在有很多小夥伴都是喜歡使用Win10系統的電腦，而在使用電腦的過程中難免會遇到一些無法解決的問題，這時候可以嘗試去重置系統，那麼該如何操作呢？下面就跟著小編一起來看Win10系統重置的教學吧，有需要的用戶可不要錯過。 Win10系統重置的教學 1、點選windows，選擇設定。 2、點選更新和安全性。 3、選擇恢復。 4、右側點選開始，重設此電腦。以上就是【Win10系統如何重置-Win10系統重置的教學】全部內容了，更多精彩教學盡在本站！
解決系統重裝時的環境偵測問題
Jan 08, 2024 pm 03:33 PM
重裝系統時環境偵測未通過如何解決需要進行改寫的原因是：手機中毒了，可以安裝手機管家等防毒軟體進行防毒軟體進行防毒2、手機內部儲存了許多垃圾文件，導致手機運作記憶體被佔用。只要清理手機快取即可解決這個問題3、手機記憶體被保存的軟體和檔案佔用太多，需要經常刪除不需要的檔案和軟體沒問題，只要你的硬體設定符合安裝要求，你可以直接使用新的系統磁碟重新安裝系統！你可以使用U盤或硬碟來進行安裝，速度非常快。但是關鍵是要使用相容性好的系統碟（支援IDE、ACHI、RAID模式的安裝），並且能夠自動永久激活，已經經過驗證的。這樣
linux文檔中option指的是什麼
May 16, 2023 am 09:55 AM
在linux中，option是指指令選項，是調整指令執行行為的開關，也就是選項不同決定了指令的顯示結果不同。 option（選項）分為長選項與短選項：1、短選項都是使用「-」引導，當有多個短選項時，各選項之間使用空格隔開；2、長選項都是完整的單字，且通常不能組合。 Linux中指令選項（option）及參數簡介登入Linux後，我們就可以在#或$符號後面去輸入指令，有的時候指令後面還會跟著「選項」（英文options）或「參數」（英文arguments） 。即Linux中命令格式為：command[opti
