layui select動(dòng)態(tài)添加option的實(shí)例
html
<form class="layui-form" action=""> <div class="layui-form-item proSelect"> <label class="layui-form-label">產(chǎn)品類別</label> <div class="layui-input-block editWidth"> <select name="productList" lay-verify="required" id="zcySelect"> <option value=""></option> <option value="0">輕松融</option> <option value="1">容易融</option> <option value="2">快樂融</option> </select> </div> </div> <a class="layui-btn layui-btn-small" id="" onclick="addProductClassify()">增加產(chǎn)品類別</a> </form> <!--彈窗內(nèi)容--> <div id="select_prod" class="layui-form" hidden="hidden"> <div class="layui-input-inline"> <input type="text" name="text" required lay-verify="required" placeholder="" autocomplete="off" class="layui-input"> </div> </div>
js
//重新渲染表單 function renderForm(){ layui.use('form', function(){ var form = layui.form();//高版本建議把括號(hào)去掉,有的低版本,需要加() form.render(); }); } //增加產(chǎn)品類別按鈕點(diǎn)擊事件 function addProductClassify(){ layer.open({ type:1, btn:['確定','取消'], content:$("#select_prod"), area:['270px','160px'], //當(dāng)前層索引參數(shù)(index)、當(dāng)前層的DOM對(duì)象(layero) yes:function(index,layero){ //獲取input輸入的值 var ivalue=$(layero).find("input").val(); //獲取要添加的option的索引 var sIndex=$("#zcySelect")[0].options.length-1; if(ivalue==null||ivalue==''){ layer.msg("請(qǐng)輸入產(chǎn)品類別") } else{ layer.msg("輸入的產(chǎn)品類別是:"+ivalue); //為select添加option $("#zcySelect").append("<option value="+sIndex+">"+ivalue+"</option>"); renderForm();//表單重新渲染,要不然添加完顯示不出來新的option layer.close(index); } $(layero).find("input").val(''); } }) }
以上這篇layui select動(dòng)態(tài)添加option的實(shí)例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
解析javascript 實(shí)用函數(shù)的使用詳解
本篇文章對(duì)javascript中的一些實(shí)用函數(shù)進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-05-05php利用curl獲取遠(yuǎn)程圖片實(shí)現(xiàn)方法
這篇文章主要介紹了php利用curl獲取遠(yuǎn)程圖片實(shí)現(xiàn)方法,curl要求php環(huán)境支持,需要的朋友可以參考下2015-10-10BOM系列第二篇之定時(shí)器requestAnimationFrame
這篇文章主要介紹了BOM系列第二篇之定時(shí)器requestAnimationFrame 的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08如何利用微信小程序獲取OneNet平臺(tái)數(shù)據(jù)顯示溫濕度
最近在工作中遇到了一個(gè)需求,需要顯示溫濕度,網(wǎng)上找了一圈沒找到解決方法,所以只能自己寫一個(gè),這篇文章主要給大家介紹了關(guān)于如何利用微信小程序獲取OneNet平臺(tái)數(shù)據(jù)顯示溫濕度的相關(guān)資料,需要的朋友可以參考下2022-03-03淺談es6中export和export default的作用及區(qū)別
下面小編就為大家分享一篇淺談es6中export和export default的作用及區(qū)別,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02javasciprt下jquery函數(shù)$.post執(zhí)行無響應(yīng)的解決方法
這篇文章主要介紹了javasciprt下jquery函數(shù)$.post執(zhí)行無響應(yīng)的解決方法,需要的朋友可以參考下2014-03-03js實(shí)現(xiàn)base64、url和blob之間相互轉(zhuǎn)換的三種方式
Blob對(duì)象表示一個(gè)不可變、原始數(shù)據(jù)的類文件對(duì)象,Blob表示的不一定是JavaScript原生格式的數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于js實(shí)現(xiàn)base64、url和blob之間相互轉(zhuǎn)換的三種方式,需要的朋友可以參考下2023-04-04IE6,IE7下js動(dòng)態(tài)加載圖片不顯示錯(cuò)誤
ie6,7下js動(dòng)態(tài)加載圖片不顯示錯(cuò)誤,碰到這類問題的朋友可以參考下。2010-07-07