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í)用函數(shù)的使用詳解
本篇文章對(duì)javascript中的一些實(shí)用函數(shù)進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-05-05
php利用curl獲取遠(yuǎn)程圖片實(shí)現(xiàn)方法
這篇文章主要介紹了php利用curl獲取遠(yuǎn)程圖片實(shí)現(xiàn)方法,curl要求php環(huán)境支持,需要的朋友可以參考下2015-10-10
BOM系列第二篇之定時(shí)器requestAnimationFrame
這篇文章主要介紹了BOM系列第二篇之定時(shí)器requestAnimationFrame 的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08
如何利用微信小程序獲取OneNet平臺(tái)數(shù)據(jù)顯示溫濕度
最近在工作中遇到了一個(gè)需求,需要顯示溫濕度,網(wǎng)上找了一圈沒(méi)找到解決方法,所以只能自己寫(xiě)一個(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ì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
javasciprt下jquery函數(shù)$.post執(zhí)行無(wú)響應(yīng)的解決方法
這篇文章主要介紹了javasciprt下jquery函數(shù)$.post執(zhí)行無(wú)響應(yīng)的解決方法,需要的朋友可以參考下2014-03-03
js實(shí)現(xiàn)base64、url和blob之間相互轉(zhuǎn)換的三種方式
Blob對(duì)象表示一個(gè)不可變、原始數(shù)據(jù)的類(lèi)文件對(duì)象,Blob表示的不一定是JavaScript原生格式的數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于js實(shí)現(xiàn)base64、url和blob之間相互轉(zhuǎn)換的三種方式,需要的朋友可以參考下2023-04-04
IE6,IE7下js動(dòng)態(tài)加載圖片不顯示錯(cuò)誤
ie6,7下js動(dòng)態(tài)加載圖片不顯示錯(cuò)誤,碰到這類(lèi)問(wèn)題的朋友可以參考下。2010-07-07

