WEUI picker元件無法js動态改變選項

功能需求

裝置号和攝像頭都可以下拉選擇，但是具體的攝像頭下拉選項是根據裝置号而定的。如下圖，尾号為352的裝置号隻有前置攝像頭，尾号為657的裝置号前置和後置攝像頭都有。

問題說明

一般情況下，這個需求很簡單，當選擇裝置号的時候js動态改變攝像頭選項裡面的值就可以了，但是WEUI picker和Select元件都不支援動态改變選項，隻支援初始指派。

解決方案

因為picker和Select元件是通過input标簽綁定，可以先通過input的父級元素移除input标簽，重新插入input标簽，最後重新初始化picker或Select元件。

核心代碼

<!--頁面部分-->
<div id="box">
      <input type="text" id='camera' value="前置攝像頭"/>
</div>
           

/*js部分，myPicker是裝置号input的ID*/
$('#myPicker').change(function () {
    /*選擇裝置号後,根據目前裝置号設定不同的攝像頭選項,具體判斷邏輯根據具體的項目而定*/
    var val = $("#myPicker").val();
    if (val === "*******352") {
         $("#box").empty();
         $("#box").html("<input type='text' id='camera' value='前置攝像頭'/>");
         $("#camera").picker({
              title: "請選擇攝像頭",
              cols: [
                   {
                       textAlign: 'center',
                       values: ['前置攝像頭']
                   }
              ]
         });
     } else {
         $("#box").empty();
         $("#box").html("<input type='text' id='camera' value='前置攝像頭'/>");
         $("#camera").picker({
              title: "請選擇攝像頭",
              cols: [
                   {
                       textAlign: 'center',
                       values: ['前置攝像頭', '後置攝像頭', '前+後攝像頭']
                   }
              ]
         });
     }
});
           

今天就分享到這裡，文中表述僅代表個人觀點，有問題歡迎留言交流，或關注樓主微信公衆号：上班熊的環球夢。