需求是这样的,要求在下拉框中选择一些人员名单,选中的第一人为小组组长,其余的为小组成员。
下拉列表借助于boosrtap-selected框架实现需要到相关的文件,具体相关内容请查看完整代码
实现过程,为select标签绑定一个onchange()事件,onchange事件中用value()去拿取select的值而不是用text()拿取文本值,也不是用选择器“select option:selected”获取已选择的项。代码如下
<select class="selectpicker" id="sel" id="sumyear" onchange="show()" multiple>
<option value="广东" id="opt">广东省</option>
<option value="广西" id="opt">广西省</option>
<option value="福建" id="opt">福建省</option>
<option value="湖南" id="opt">湖南省</option>
<option value="山东" id="opt">山东省</option>
</select>
<br>
<textarea name="showNmae" id="showNmae" cols="30" rows="10"></textarea>
js的onchange()代码如下
function show(){
// var val=$("#sel option:selected").val()
var val=$("#sel").val();
//判断是否为空
if(first=="" || val==""){
first=val; //将小组组长赋值或设置为空
name=val; //将小组成员赋值或设置为空
}else{
if(!isInArray(val,first)){
// 当先有小组组长没在数组中是,则将数组中的第一位设置为小组组长
// var len=val.lastIndexOf(",");
// console.info("第一个','的位置在:"+len)
// alert(val[0])
// first=val.substring(0,len)
first=val[0]
name=val
}else{
}
name=val;
}
// console.info("first的值:"+first)
// console.info("下拉列表数组的值"+val)
}
因为获取到的文本值是以数组形式存在,需要用循环遍历 方式遍历 查找小组组长是否还在选项当中,isInArray()代码如下,需要 传入两个参数,arr是需要传入的遍历的数组,即选中的小组成员名单,value为需要遍历查找的元素,即小组组长,返回结果类型为Boolean类型。如果存在则返回true,不存在则返回false。
function isInArray(arr,value){
console.info("数组长度:"+arr.length)
for(var i = 0; i < arr.length; i++){
console.info("数组val["+(i+1)+"]的值:"+arr[i])
if(value == arr[i]){
return true;
}
}
return false;
}
最后将提取的信息打印到文本框当中
$('textarea').text("小组组长:" +first+"\n小组成员:"+name);
到此大致内容完成,
不过要注意的是,在小组组长没在数组中是,选则的小组组长是当前数组的第一位,并不是认为选择的第二位成员。
完整代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/select/css/bootstrap-select.css">
<title>Document</title>
</head>
<body>
<select class="selectpicker" id="sel" id="sumyear" onchange="show()" multiple>
<option value="广东" id="opt">广东省</option>
<option value="广西" id="opt">广西省</option>
<option value="福建" id="opt">福建省</option>
<option value="湖南" id="opt">湖南省</option>
<option value="山东" id="opt">山东省</option>
</select>
<br>
<textarea name="showNmae" id="showNmae" cols="30" rows="10"></textarea>
<script src="jquery/jquery.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="bootstrap-3.3.7-dist/select/js/bootstrap-select.js"></script>
<script src="bootstrap-3.3.7-dist/select/js/i18n/defaults-zh_CN.js"></script>
<script>
var first="";
var name="";
//判断小组组长是否还在数组当中
function isInArray(arr,value){
console.info("数组长度:"+arr.length)
for(var i = 0; i < arr.length; i++){
console.info("数组val["+(i+1)+"]的值:"+arr[i])
if(value == arr[i]){
return true;
}
}
return false;
}
//下拉框的change事件
function show(){
// var val=$("#sel option:selected").val()
var val=$("#sel").val();
//判断是否为空
if(first=="" || val==""){
first=val;
name=val;
}else{
if(!isInArray(val,first)){
// var len=val.lastIndexOf(",");
// console.info("第一个','的位置在:"+len)
// alert(val[0])
// first=val.substring(0,len)
first=val[0]
name=val
}else{
}
name=val;
}
console.info("first的值:"+first)
console.info("下拉列表数组的值"+val)
$('textarea').text("小组组长:" +first+"\n小组成员:"+name);
}
</script>
</body>
</html>