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)品類(lèi)別</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">快樂(lè)融</option>
</select>
</div>
</div>
<a class="layui-btn layui-btn-small" id="" onclick="addProductClassify()">增加產(chǎn)品類(lèi)別</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)品類(lèi)別按鈕點(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)品類(lèi)別")
}
else{
layer.msg("輸入的產(chǎn)品類(lèi)別是:"+ivalue);
//為select添加option
$("#zcySelect").append("<option value="+sIndex+">"+ivalue+"</option>");
renderForm();//表單重新渲染,要不然添加完顯示不出來(lái)新的option
layer.close(index);
}
$(layero).find("input").val('');
}
})
}
以上這篇layui select動(dòng)態(tài)添加option的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript中遞歸實(shí)現(xiàn)的方法及其區(qū)別
遞歸函數(shù)是在通過(guò)名字調(diào)用自身的情況下構(gòu)成的。下面通過(guò)本文給大家分享JavaScript中遞歸實(shí)現(xiàn)的方法及其區(qū)別,感興趣的朋友一起看看吧2017-09-09
使用原生的javascript來(lái)實(shí)現(xiàn)輪播圖
這篇文章主要介紹了使用原生的javascript來(lái)實(shí)現(xiàn)輪播圖,在代碼底部給大家補(bǔ)充了原生javascript實(shí)現(xiàn)banner圖自動(dòng)輪播切換 ,需要的朋友可以參考下2017-02-02
微信小程序和公眾號(hào)實(shí)現(xiàn)簽到頁(yè)面
這篇文章主要為大家詳細(xì)介紹了微信小程序和公眾號(hào)實(shí)現(xiàn)簽到頁(yè)面,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08
JS Excel讀取和寫(xiě)入操作(模板操作)實(shí)現(xiàn)代碼
前一段時(shí)間一直在做報(bào)表,所以肯定會(huì)用到Excel的操作,但是在網(wǎng)上查閱資料有關(guān)JS操作excel較少,有的話,也都是老生常談或很零碎的一些東西。2010-04-04
ES6新特性二:Iterator(遍歷器)和for-of循環(huán)詳解
這篇文章主要介紹了ES6新特性二:Iterator(遍歷器)和for-of循環(huán),結(jié)合實(shí)例形式分析了ES6中Iterator(遍歷器)和for-of循環(huán)遍歷操作的相關(guān)實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下2017-04-04
Javascript 網(wǎng)頁(yè)黑白效果實(shí)現(xiàn)代碼(兼容IE/FF等)
今天在網(wǎng)上看到有人推薦的一個(gè)不錯(cuò)的方法,試了一下,效果還是可以的,可以自定義讓網(wǎng)頁(yè)的某一部分變成灰度顏色(黑白)。2010-04-04
js 去掉空格實(shí)例 Trim() LTrim() RTrim()
js 去掉空格實(shí)例Trim(),LTrim(),RTrim() 需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01
理解 javascript 中的函數(shù)表達(dá)式與函數(shù)聲明
這篇文章主要介紹了理解 javascript 中的函數(shù)表達(dá)式與函數(shù)聲明,需要的朋友可以參考下2017-07-07

