select的option疊加如何處理
這次帶給大家select的option疊加如何處理，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中文網其它相關文章！
推薦閱讀：
以上是select的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)
WIN10服務主機太佔cpu的處理操作過程
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格式檔案。步驟一：了解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（可擴展標記語言）是一種用於儲存和傳輸資料的標記語言，而JSON（JavaScript物件表示）是一種輕量級的資料交換格式。在C#開發中，我們經常需要處理和操作XML和JSON數據，本文將重點放在如何使用C#處理這兩種數據格式，並附上
win7升級至win10失敗後，如何解決？
Dec 26, 2023 pm 07:49 PM
如果我們使用的作業系統是win7的話，對於升級的時候有的小夥伴們可能就會出現win7升win10失敗的情況。小編覺得我們可以嘗試重新升級看下能不能解決。詳細內容就來看下小編是怎麼做的吧~win7升win10失敗怎麼辦方法一：1.建議下載個驅動人生先評估下你電腦是否可以升級到Win10，2.然後升級後用驅動人生檢測下有沒有驅動異常這些，然後一鍵修復。方法二：1.刪除C:\Windows\SoftwareDistribution\Download下的所有檔案。 2.win+R運行“wuauclt.e
使用golang進行Select Channels Go並發式程式設計的非同步處理方法
Sep 28, 2023 pm 05:27 PM
使用golang進行SelectChannelsGo並發式程式設計的非同步處理方法引言：並發式程式設計是現代軟體開發中的重要領域，它可以有效地提高應用程式的效能和回應能力。在Go語言中，使用Channels和Select語句可以簡單而有效率地實現並發程式設計。本文將介紹如何使用golang進行SelectChannelsGo並發式程式設計的非同步處理方法，並提供具體的
C#中的異常處理及錯誤日誌記錄技巧
Oct 08, 2023 am 11:51 AM
C#中的異常處理及錯誤日誌記錄技巧引言：在軟體開發過程中，異常處理和錯誤日誌記錄是非常重要的環節。對於C#開發者來說，掌握異常處理的技巧和錯誤日誌記錄的方法可以幫助我們更好地追蹤和調試程式碼，提高程式的穩定性和可維護性。本文將介紹C#中常用的異常處理技巧，並提供具體的程式碼範例，幫助讀者更了解和應用異常處理和錯誤日誌記錄。一、異常處理的基本概念異常是指在程序
PHP7中的生成器：如何有效率地處理大規模資料和節省記憶體？
Oct 20, 2023 pm 04:42 PM
PHP7中的生成器：如何有效率地處理大規模資料和節省記憶體？概述：在大規模資料處理和節省記憶體方面，PHP7引入了生成器（Generators）作為一種強大的工具。生成器是PHP語言中一類特殊的函數，與普通函數不同的是，生成器可以暫停執行並傳回中間結果，而不是將所有結果一次傳回。這使得生成器非常適合處理大批量數據，降低了記憶體的使用和提高了處理效率。本文將介紹生
