layui的select和穿梭框联动

左边是select框，选中左边后，穿梭框左框数据改变。
现在的问题是：
1.select显示全部，然后单选；
2.select切换后，想要保留穿梭框右框数据；

layui是不支持原生change的，换个思路如下，用layui的自己select组件
html代码

<form class="layui-form layui-form-pane">
  <div class="layui-form-item">
    <label class="layui-form-label">左边的Select</label>
    <div class="layui-input-inline">
      <select name="leftSelect" lay-verify="required" id="leftSelect">
        <option value="">请选择</option>
        <option value="1">option 1</option>
        <option value="2">option 2</option>
        <option value="3">option 3</option>
      </select>
    </div>
  </div>
</form>
<div class="layui-row " style="margin-top: 20px;">
  <div class="layui-col-md5" style="border: 1px solid #ccc;">
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button type="button" class="layui-btn layui-btn-normal" id="btn0">>></button>
        <button type="button" class="layui-btn layui-btn-normal" id="btn1"><<</button>
      </div>
    </div>
    <div class="layui-form-item">
      <select name="left" id="left" lay-filter="leftSelect" multiple>
        <option value="选项0">选项0</option>
        <option value="选项1">选项1</option>
        <option value="选项2">选项2</option>
        <option value="选项3">选项3</option>
        <option value="选项4">选项4</option>
      </select>
    </div>
  </div>
  <div class="layui-col-md5 layui-col-md-offset2" style="border: 1px solid #ccc;">
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button type="button" class="layui-btn layui-btn-normal" id="btn2">>></button>
        <button type="button" class="layui-btn layui-btn-normal" id="btn3"><<</button>
      </div>
    </div>
    <div class="layui-form-item">
      <select name="right" id="right" multiple></select>
    </div>
  </div>
</div>

js代码

layui.use(['form', 'jquery'], function () {
  var form = layui.form,
      $ = layui.jquery;
  
  // 页面加载时，保存右侧的穿梭框数据
  var rightData = [];
  var opts = $('#right option');
  for (var i = 0; i < opts.length; i++) {
    rightData.push($(opts[i]).val());
  }

  // 将保存的右侧数据填充到穿梭框
  for (var i = 0; i < rightData.length; i++) {
    $('#right').append('<option value="' + rightData[i] + '">' + rightData[i] + '</option>');
  }

  // 左侧选择框选择事件
  form.on('select(leftSelect)', function () {
    // 获取左侧选择框的值
    var leftValue = $('#leftSelect').val();
    if (leftValue === '') {
      // 如果左侧选择框的值为空，则将右侧的穿梭框数据清空
$(‘#right’).empty();
} else {
// 如果左侧选择框有选中项，则将保存的右侧穿梭框数据填充到右侧穿梭框
for (var i = 0; i < rightData.length; i++) {
$(‘#right’).append(‘<option value="' + rightData[i] + '">’ + rightData[i] + ‘</option>’);
}
}
form.render();
});

// 右移按钮点击事件
$(‘#btn0’).click(function () {
var leftOpts = $(‘#left option:selected’);
if (leftOpts.length === 0) {
layer.msg(‘请选择需要移动的选项’);
return;
}
for (var i = 0; i < leftOpts.length; i++) {
var value = $(leftOpts[i]).val();
$(‘#right’).append(‘<option value="' + value + '">’ + value + ‘</option>’);
$(leftOpts[i]).remove();
}
form.render();
});

// 左移按钮点击事件
$(‘#btn1’).click(function () {
var rightOpts = $(‘#right option:selected’);
if (rightOpts.length === 0) {
layer.msg(‘请选择需要移动的选项’);
return;
}
for (var i = 0; i < rightOpts.length; i++) {
var value = $(rightOpts[i]).val();
$(‘#left’).append(‘<option value="' + value + '">’ + value + ‘</option>’);
$(rightOpts[i]).remove();
}
form.render();
});

// 左侧选择框双击事件
$(‘#left’).dblclick(function () {
var leftValue = $(‘#left option:selected’).val();
if (!leftValue) {
return;
}
$(‘#right’).append(‘<option value="' + leftValue + '">’ + leftValue + ‘</option>’);
$(‘#left option:selected’).remove();
form.render();
});

// 右侧选择框双击事件
$(‘#right’).dblclick(function () {
var rightValue = $(‘#right option:selected’).val();
if (!rightValue) {
return;
}
$(‘#left’).append(‘<option value="' + rightValue + '">’ + rightValue + ‘</option>’);
$(‘#right option:selected’).remove();
form.render();
});
});

需要为 Select 框绑定一个 change 事件，以监听用户选择的选项。在事件处理程序中，可以获取用户选择的选项的值，然后使用 Ajax 请求从服务器获取相应的数据，然后使用 layui 的 transfer.render() 方法重新渲染穿梭框的左侧列表

• 你可以看下这个问题的回答https://ask.csdn.net/questions/995519
• 你也可以参考下这篇文章：数据库入门：select部分用法
• 除此之外, 这篇博客: 第 03 篇 使用 SELECT 语句初步探索数据库中的 查询全部字段 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 查看表中的全部字段可以使用一个简单的写法，就是使用星号（*）表示全部字段。例如，以下语句查询员工表中的所有数据：

  SELECT * 
    FROM employee;
  

  数据库在解析该语句时，会使用表中的字段名进行扩展：

  SELECT emp_id, emp_name, sex, dept_id, manager,
         hire_date, job_id, salary, bonus, email
    FROM employee;
  

  该语句执行的结果如下（显示部分数据）：

  

  注意：星号可以便于快速编写查询语句，但是在实际项目中不要使用这种写法。因为应用程序可能并不需要所有的字段，避免返回过多的无用数据；另外，当表结构发生变化时，星号返回的信息也会发生改变。

  除了查询表的字段之外，SELECT 语句还支持扩展的投影操作，包括基于字段的算术运算、函数和表达式等。