xmselect的使用

xmselect是layui中一個非常好用的第三方組件，本文使用xmselect這個下拉組件演示其用法，方便學習和分享。

下圖是xmselect組件的效果：

1.擴展到layui對象中

layui.config({
    base: '../res/layui/modules/' //配置 layui 第三方擴展組件存放的基礎目錄
  }).extend({
    xmSelect:'xm-select'
  });
//這里config(),和extend()都是layui對象的方法，這是鏈式調用了，分開單獨 layui.extend() 也可以

config()方法
base:組件的存放位置，相對路徑，可以只寫組件的文件夾，因為該文件夾下可以有多個組件。
extend()方法
方法中可直接拓展你下載好的第三方組件，格式如下

{自定義名稱:組件絕對路徑路徑}
例如：

  layui.extend({
    xmSelect:'c:/layui/modules/xm-select'
  });
  //路徑寫到改組件js所在的文件夾+文件名（不寫后綴）

以上做完就可以在layui對象中使用 xmselect 組件了

2.使用xmselect組件

這個組件的使用也是非常簡單，只要你在頁面中寫入一個

元素入口，就可以用js去操作（生成，初始化）這個好看的組件了。

在頁面中添加div元素

<div id="selectTest"></div>

在layui.use()方法中使用

layui.use(['xmSelect'], function(){
  var xmSelect = layui.xmSelect;

  var selectTest = xmSelect.render({
	el:"#selectTest",
	style:{width:'200px'},
	data: [
	  {name: '水果', value: 1},
	  {name: '蔬菜', value: 2},
	  {name: '桌子', value: 3},
	  {name: '北京', value: 4},
	]
  });

注意：layui.use()方法第一個參數（組件名稱數組），第三方組件只用layui.config()方法和layui.extend()擴展了，參數才能被layui對象識別，並引入。

data： 下拉欄的選項，格式如例子中即可，
如果在項目中，data通常需要你構建好，或者提前使用ajax提前加載到這個數據，當然xmselect也提供了遠程調用的方法，下面再介紹。

3.xmselet回顯

當我們在成功保存選項到數據庫后，項目中通常需要再編輯頁面將這個已選擇的選項顯示到框框中。

var selectTest = xmselect.render()

xmselect對象在渲染時返回的元素在這里派上用場了

selectTest.setValue([1]);

參數: value值的數組（data中的value值），如果你的data數據完整那么xmselect對象會通過指定的value值回顯。

當然沒有完整的下拉欄信息，也可以設置單條數據回顯。

selectTest.setValue([{ name: '動態值', value: 999 }])

其他方法：
獲取value值

selectTest.getValue();