鍍金池/ 問(wèn)答/網(wǎng)絡(luò)安全  HTML/ 如何使用weui picker實(shí)現(xiàn)省市聯(lián)動(dòng)。

如何使用weui picker實(shí)現(xiàn)省市聯(lián)動(dòng)。

省改變時(shí)候如何讓市跟著改變，現(xiàn)在只有點(diǎn)擊確定在點(diǎn)開(kāi)時(shí)候才回改變。

$('#showPicker').on('click', function () {
   weui.picker( $scope.provinces, $scope.citys, {
       onChange: function (result) {
            dataService.getCityByGrade(
                $scope.pro[result[0]].id,function(data1) {
                    $scope.getCity = data1;
                    $scope.citys = [];
                    for(var i = 0, len = data1.length; i < len; i++){
                        $scope.citys.push({label: data1[i].name, value: i});
                    }
                })
                $scope.$apply(function(){})
            },
       onConfirm: function (result) {
            console.log(result);
            $scope.searPro = $scope.provinces[result[0]].label;
            $scope.searCity = $scope.citys[result[1]].label;
            $scope.search = $scope.searPro + " " + $scope.searCity;
            $scope.$apply(function(){})
        }
    });
});

clipboard.png

回答
編輯回答
青黛色

使用city-picker框架解決：

$("#city-picker").cityPicker({
      showDistrict: false,
      onChange: function(res){
          $scope.searPro = res.displayValue[0];
          $scope.searCity = res.displayValue[1];
          $scope.search = $scope.searPro + " " + $scope.searCity;
      }
});

css使用jquery-weui.min.css，js使用jquery-weui.min.js和city-picker.min.js

圖片描述

2018年3月29日 01:05
編輯回答
哎呦喂

遇到同樣的問(wèn)題，不知道樓主是否已經(jīng)解決？

2018年6月3日 00:06