mui picker选择器动态赋值不成功

后端使用thinkphp6框架，查询数据，按照需求封装成前端需要的json数组格式，原始数据如下：

开始处理数据： 

public function index(){        
    $industry = industry(); //行业详情 ，查询出来的数据，如上面的二维数组    
    $arr = array(); //空数组 用于存储前台需要的数据
    foreach($industry as $k=>$v) { //拼接前台需要的数据
         $arr[$k]['value'] = $v['t_id']; 
         $arr[$k]['text'] = $v['t_name'];
    }
     
    return view('index',[
        'carousel' => carousel(), //轮播图
        'industryStr' => urldecode(json_encode($arr)), //行业详情 ，将处理好的数据变成 json 传递，因为这里数组中包含中文，所以需要使用 urldecode() 处理一下
    ]);
}

处理好的数据如下：

[{"value":1,"text":"\u4e92\u8054\u7f51"},{"value":2,"text":"\u901a\u4fe1"},{"value":3,"text":"\u7535\u5b50"},{"value":4,"text":"\u91d1\u878d"},{"value":5,"text":"\u94f6\u884c"},{"value":6,"text":"\u4fdd\u9669"}]

这里我发现，如果将上面的json数组使用静态方法直接赋值给mui的选择器是可以直接使用的，但是我用动态赋值的方法则不行，不光是不行，连值我都打印不出来，后来我估计应该是数据有问题，导致js都失效了，后来改了一种写法，将得到的数据输出在html页面，然后使用js去拿数据，并使用$.parseJSON( )处理数据：

<!-- html 代码 -->
<div id="industryStr" style="display: none">{$industryStr}</div>
<div class="search-left">
    <a href="JavaScript:;" onclick="selecteds()">
       <span id="industry">选择行业</span>
       <span class="mui-icon mui-icon-arrowdown"></span>
   </a>
</div>

//js代码
function selecteds() {
    var picker = new mui.PopPicker();
    var arr = $("#industryStr").text(); //获取 json 
    picker.setData($.parseJSON(arr)); //处理 json
    picker.show(function (selectItems) {
        $("#industry").html(selectItems[0].text);
        console.log(selectItems[0].value);
    })
} 

最终效果：