当前位置: 首页 > 工具软件 > formSelects > 使用案例 >

formSelects-v4.js 基于Layui的多选模块的取值与赋值

慕鸿波
2023-12-01

<link rel="stylesheet" href="formSelects-v4.css" />
<script src="layui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    //全局定义一次, 加载formSelects
    layui.config({
        base: '../src/' //此处路径请自行处理, 可以使用绝对路径
    }).extend({
        formSelects: 'formSelects-v4'
    });
    //加载模块
    layui.use(['jquery', 'formSelects'], function(){
        var formSelects = layui.formSelects;
         
    });
</script>
 

/**
 * 1.获取选中数据
 *
 * formSelects.value(ID, TYPE);
 *
 * @param ID    xm-select的值
 * @param TYPE  all | val | valStr | name | nameStr
 */
var formSelects = layui.formSelects;
formSelects.value('select1');               // [{"name":"上海","val":"2"},{"name":"深圳","val":"4"}]
formSelects.value('select1', 'all');        // [{"name":"上海","val":"2"},{"name":"深圳","val":"4"}]
formSelects.value('select1', 'val');        // ["2","4"]
formSelects.value('select1', 'valStr');     // 2,4
formSelects.value('select1', 'name');       // ["上海","深圳"]
formSelects.value('select1', 'nameStr');    // 上海,深圳
 


/**
 * 设置select的选中值
 *
 * formSelects.value(ID, ARR);
 *
 * @param ID    xm-select的值
 * @param ARR   value数组
 */
var formSelects = layui.formSelects;
formSelects.value('select1', [2, 4]);       // 选中value为2和4的option → 上海,深圳
 
 
/**
 * 追加或删除select的选中值
 *
 * formSelects.value(ID, ARR, isAppend);
 *
 * @param ID    xm-select的值
 * @param ARR   value数组
 */
var formSelects = layui.formSelects;
formSelects.value('select1', [2, 4], true); // 追加value为2和4的option, 如果该值已选中则跳过, 该值未选中则选中
formSelects.value('select1', [2, 4], false);// 删除value为2和4的option, 如果该值没有选中则跳过, 该值被选中则取消选中
 

/**
 * 1.监听select的选中与取消
 *
 * formSelects.on(ID, Function);
 *
 * @param ID        xm-select的值
 * @param Function  自定义处理方法
 * @param isEnd     是否获取实时数据, true/false
 */
formSelects.on('select1', function(id, vals, val, isAdd, isDisabled){
    //id:           点击select的id
    //vals:         当前select已选中的值
    //val:          当前select点击的值
    //isAdd:        当前操作选中or取消
    //isDisabled:   当前选项是否是disabled
     
}, true);
 

 类似资料: