玖叶教程网

今天项目上用到了select的下拉框，需要的功能是 下拉框能输入能多选，

正好在layui的第三方组件找到了xm-select的组件，超级好用，超级推荐，

select的功能基本是发掘到极致！

这里科技小锅盖就是遇到了自己已保存的相关的值和所需类型的值需要在前台渲染上，

遇到的问题，浪费了好一会才解决，这里看看吧！

1、已保存的值和公共的类型组合成一个数组

//行业赛道
$hangye=AuthType::where("")->where("type",2)->select();
foreach ($hangye as $k=>$v){
    $hangye_arr1[]=$v["title"];
}
foreach ($hangye_arr1 as $k=>$v){
    $new1[$k]["value"]=$v;
    $new1[$k]["name"]=$v;
}

$hangye_arr2=explode(",",$list["hangye"]);
foreach ($hangye_arr2 as $k=>$v){
    $new2[$k]["value"]=$v;
    $new2[$k]["name"]=$v;
    $new2[$k]["selected"]=true;
}

// 整体思路就是把已选的和未选的组成一个数组再通过in_array筛选
//（筛选后会出现重复的数组过滤一下就可以）
$new_array=array_merge($new2,$new1);

return json_return("0","success",$new_arr);

//这里一定要看好xm-select所需要的的返回值的参数

2、把组合好的数组再遍历一下，再通过in_array 筛选一下组成新的数组。

（1）、组成的新数组已选的值selected为true的值会有重复用array_unique去除重复的数组。

（2）、去重的数组会有新的键名，再用array_values重新获取一下值就可以。

foreach ($new_array as $k=>$v){
    if(in_array($v["value"], $hangye_arr2))
    {
        $tmp_arr[$k]["value"]=$v["value"];
        $tmp_arr[$k]["name"]=$v["name"];
        $tmp_arr[$k]["selected"]=true;
    }
    else {
        $tmp_arr[$k]["value"]=$v["value"];
        $tmp_arr[$k]["name"]=$v["name"];
        $tmp_arr[$k]["selected"]=false;
    }
}
//二维数组去重并获取去重后value值
$new_arr=array_values(array_unique($tmp_arr, SORT_REGULAR));

3、前端调取xm-select的相关（我这里调用的是）

这里需要调用两个js、 xm-select的就是和axios的js 否则无法远程调取参数

//想创建就必须要开启本地搜索
xmSelect.render({	//...
	filterable: true,
	create: function(val, arr){		
        //返回一个创建成功的对象, val是搜索的数据, arr是搜索后的当前页面数据
		return {
			name: '创建-' + val,
			value: val
		}
	}
})

axios({	method: 'get',	
        url: 'https://www.fastmock.site/mock/98228b1f16b7e5112d6c0c87921eabc1/xmSelect/search',
}).then(response => {	var res = response.data;
	demo2.update({		
        data: res.data,		
        autoRow: true,
	})
});

到这里就结束啦，xm-select还是很推荐的，麻烦一点的就是后端的数据的组合稍微麻烦一些，不过还好啦，哈哈哈