layui select 相關

layui select 相關

<div class="layui-form" lay-filter="test">
    <select name="courseType" id="courseType" lay-filter="courseType"></select>
</div>

動態生成option

 let _html = ' ';
  for (const item of data) {
    //data-xxx為自定屬性
    _html += `<option class="" data-disporder="${item.disporder}" data-id="${item.id}" data-type="${type}">${item.name}</option>`;
  }

  $("#courseType").append(_html);
  //動態追加之後需要渲染一下
  form.render("select");//或者 form.render()

渲染（動態新增opotion後）

 //重新整理select選擇框渲染
form.render('select');
 //重新整理lay-filter="test"內select選擇框渲染
form.render('select','test0);

獲取指定option的所有屬性值

//獲取第一個option的value
//通過js
document.querySelector("#courseType").options[0].value;
//通過jq
$('#selects option:first').val();
$('#selects option:eq(0)').val();
$('#selects option').eq(0).val();

//獲取第一個option的data-xxx的值
//第x個是eq(x)
let dataJson = $("#courseType option").eq(0)[0].dataset;
// dataJson
 {
  disporder: "0",
  id: "1",
  type: "yes"
 }

 let disporder = $("#courseType option").eq(0)[0].dataset.disporder;//"0"

監聽下拉事件

form.on('select(courseType)', function(data){
  console.log(data.elem); //得到select原始DOM物件
  console.log(data.value); //得到被選中的值
  console.log(data.othis); //得到美化後的DOM物件
});

獲取當前selected的值

  form.on('select(courseType)', function (data) {
    console.log(data.value); //得到被選中的value
    console.log(data.elem[data.elem.selectedIndex].id)//自定義的id
    console.log(data.elem[data.elem.selectedIndex].dataset.type)//自定義的type
    });