根据layui的下拉框选择项显示不同div内容

根据layui的下拉框选择项显示不同div内容
Html代码

<div class="layui-input-inline" >
	<select  id="sel" lay-filter="sel" >
		<option value="byq" class="aaa">1111</option>
		<option value="kx"class="aaa">2222</option>
		<option value="pds"class="aaa">3333</option>
	</select>
</div>
<div id="tabBody">
	<div id="byq" class="xxx"style="display: none;">内容1111</div>
	<div id="kx"class="xxx" style="display: none;">内容2222</div>
	<div id="pds" class="xxx"style="display: none;">内容3333</div>
</div> 

JavaScript 代码

 var form = layui.form;
 var $ = layui.$
 form.render();
 form.on('select(sel)', function (data) {
        console.log(data.elem); //得到select原始DOM对象
        console.log(data.value); //得到被选中的值
        console.log(data.othis); //得到美化后的DOM对象
        if (data.value != "") {
            var  SHOW = 'layui-show';
			  $("#tabBody>.xxx").siblings().removeClass(SHOW);
			  $("#tabBody>#"+data.value).addClass(SHOW);
        }  
}); 

如果有什么好的方式，欢迎评论区指教