1. 程式人生 > >多選賦值,預設選中問題

多選賦值,預設選中問題

建立一個數組,獲取多選的

 val()返回value值

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script>
$(document).ready(function () {
var data=new Array("0","1","2","3");
$("#tar").val(data);
})
</script>
<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
<style>body{padding:20px;}.multi dl dd.layui-this{background-color:#fff}</style>
</head>
<body>
<form class="layui-form layui-form-pane" action="">
<div class="layui-form-item">
<label class="layui-form-label">多選</label>
<div class="layui-input-block">
<select multiple="multiple" lay-filter="test" id="tar">
<option value=""></option>
<option value="0" >A</option>
<option value="1">B</option>
<option value="2">C</option>
<option value="3" >D</option>
</select>
</div>
</div>

<button type="button" class="layui-btn layui-btn-normal" id="get-val">獲取選中值</button>
</form>
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript">
layui.config({
base: 'js/',
})
layui.use(['multiSelect'],function() {
var $ = layui.jquery,form = layui.form,multiSelect = layui.multiSelect;
$('#get-val').click(function() {
var vals = [],
texts = [];

$('select[multiple] option:selected').each(function() {
vals.push($(this).val());
//push() 方法可向陣列的末尾新增一個或多個元素,並返回新的長度。
texts.push($(this).text());
})
console.dir(vals);
console.dir(texts);
})
form.on('select(test)',function(data){
console.dir(data);
})//把值轉為文字,控制檯輸出
});

</script>
</body>
</html>