layui select动态添加option
<form class="layui-form" action="">
<div class="layui-form-item proSelect">
<label class="layui-form-label">产品类别</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()">增加产品类别</a>
</form>
<!--弹窗内容-->
<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();//高版本建议把括号去掉,有的低版本,需要加()
form.render();
});
}
//增加产品类别按钮点击事件
function addProductClassify(){
layer.open({
type:1,
btn:['确定','取消'],
content:$("#select_prod"),
area:['270px','160px'],
//当前层索引参数(index)、当前层的DOM对象(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("请输入产品类别")
}
else{
layer.msg("输入的产品类别是:"+ivalue);
//为select添加option
$("#zcySelect").append("<option value="+sIndex+">"+ivalue+"</option>");
renderForm();//表单重新渲染,要不然添加完显示不出来新的option
layer.close(index);
}
$(layero).find("input").val('');
}
})
}
layui select动态添加option的更多相关文章
- JS对select动态添加option操作 (三级联动) (搜索拼接)
以下纯属自我理解之下再东搜西查的内容~ JS对select动态添加option操作有个高大上的艺名叫多级联动:第一级改变时,第二级跟着变,第二级改变时,第三级跟着变... 本菜鸟是在工作中遇到做收货地 ...
- js实现select动态添加option
关于 select 的添加 option 应该注意的问题. 标准的做法如上也就是说,标准的做法是 s.options.add();但是如果你一定要用 s.appendChild(option);注意了 ...
- select 动态添加option函数
转自:https://lym6520.iteye.com/blog/309937 经常会用到select动态添加元素,写了个方法,方便调用! ... /** * 功能:select对象动态添加Opt ...
- 利用js给datalist或select动态添加option选项
<!DOCTYPE html> <html> <head> <title>鼠标点击时加载</title> <script type=& ...
- Js Select动态添加Option
var now = new Date(); function setDate(type, id, from, to) { var str = ""; for (var i = fr ...
- js对select动态添加和删除OPTION
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
- 使用js对select动态添加和删除OPTION示例代码
动态删除select中的所有options.某一项option以及动态添加select中的项option,在IE和FireFox都能测试成功,感兴趣的朋友可以参考下,希望对大家有所帮助 <s ...
- HTML标签 select 里 动态添加option
HTML标签 select 里 动态添加option: ☆ var today = new Date(); var yearNow = today.getFullYear(); var optiong ...
- 使用js对select动态添加和删除OPTION
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
随机推荐
- [转载]如何通过ssh进行上传/下载
[转载]如何通过ssh进行上传/下载 学校给配了服务器的用户账号,但是怎么向服务器中上传以及下载文件呢?Windows下可以使用Xftp和Xshell,但是Linux下能不能用命令行解决呢? 什么是S ...
- Vue2 & ElementUI实现管理后台之input获得焦点
Vue.directive('focus', function (el, option) { var defClass = 'el-input', defTag = 'input'; var valu ...
- 72. Edit Distance (JAVA)
Given two words word1 and word2, find the minimum number of operations required to convert word1 to ...
- python语音提示
#coding:utf8 import win32com.client speaker = win32com.client.Dispatch("SAPI.SpVoice") whi ...
- javase中的super、this和protected关键字
关键字 this 记住一句话:this是指向对象本身的一个指针. 注意: this只能用于方法体内,且只能在非静态方法中,也就是说只有实例调用的方法中才能出现this,我们可以认为当new了一个实例后 ...
- 安装CRMEasy步骤
生成CRMEasy安装包的步骤: 所需文件: InstallShieldExpress软件 CRMEasy.iwz工程文件 XP系统(虚拟机即可) 安装 CRMEasy 步骤: 1.windows X ...
- zencart 输出产品特价折扣百分比
通过调用zen_get_products_base_price($products_id)获取原价,zen_get_products_special_price($products_id)获取特价,进 ...
- nasm
sudo apt install nasm 64bit: nasm -f elf64 test.asm ld -s -o test test.o --------------------------- ...
- SQL查询操作
有7个筛选条件任意一个条件都可以筛选.采用LINQ查询比较繁琐,且操作步骤增加,选择用SQL判断. public DataTable GetData(string cboCld, string cbo ...
- 问题:关于2.3 jmu-Java-02基本语法-03-身份证排序 (9 分)
输出未能排序 import java.util.Scanner; import java.util.Arrays; public class Main { pu ...