select2picker联动
yoyocmf 2021-05-13 14:39:18

 未命名.png

 

 

PHP Code复制内容到剪贴板
  1.             <?= $form->field($model'category_id')->dropDownListForPlugin(\common\modules\project2\models\ProjectCategory::getDropDownList('''category'), ['id' => 'firstSelect']) ?>  
  2.             <?= $form->field($model'subclass_id')->dropDownListForPlugin([], ['id' => 'secondSelect']) ?>  
  3.   
  4.   
  5.   
  6. <?php $this->beginBlock('js') ?>  
  7.     <script>  
  8.         // 获取点击事件  
  9.         var select1 = document.getElementById("firstSelect");  
  10.         select1.addEventListener('change'function () {  
  11.             // console.log(this.value)  
  12.             $.ajax({  
  13.                 method: 'POST',  
  14.                 url: '<?=\yii\helpers\Url::to(["/project2/category/index"])?>?parent_id=' + this.value,  
  15.                 success: function (res) {  
  16.                     const data = res.data;  
  17.                     console.log(data.length)  
  18.                     var opstr = "";  
  19.                     if (data.length) {  
  20.                         $.each(data, function (i, n) {  
  21.                             opstr += " <option value=\"" + n.category_id + "\">" + n.title + "</option>";  
  22.                         });  
  23.                     } else {  
  24.                         opstr = "<option value='0'>暂无小类</option>";  
  25.                     }  
  26.                     $('#secondSelect').html(opstr);  
  27.                     $('#secondSelect').selectpicker('refresh');  
  28.                     console.log(res)  
  29.                 }  
  30.             });  
  31.         });  
  32.         //单一添加下拉改变事件  
  33.         select1.onmousedown = function () {//当按下鼠标按钮的时候  
  34.             this.sindex = this.selectedIndex;//把当前选中的值得索引赋给下拉选中的索引  
  35.             this.selectedIndex = -1;//把下拉选中的索引改变为-1,也就是没有!  
  36.         };  
  37.         select1.onmouseout = function () {//当鼠标移开的时候  
  38.             var index = id.selectedIndex;//获取下拉选中的索引  
  39.             if (index == -1) {//如果为-1,就是根本没有选  
  40.                 this.selectedIndex = this.sindex;//就把下拉选中的索引改变成之前选中的值得索引,就默认选择的是之前选中的值  
  41.             }  
  42.         }  
  43.   
  44.         // 初始化赋值  
  45.         initGetSecond();  
  46.   
  47.   
  48.         function initGetSecond() {  
  49.             //2:拿到选中项的索引:  
  50.             const index = select1.selectedIndex;             // selectedIndex代表的是你所选中项的index  
  51.             //3:拿到选中项options的value:  
  52.             const select1Val = select1.options[index].value;  
  53.             //4:拿到选中项options的text:  
  54.             const select1Text = select1.options[index].text;  
  55.             if (select1Val) {  
  56.                 $.ajax({  
  57.                     method: 'POST',  
  58.                     url: '<?=\yii\helpers\Url::to(["/project2/category/index"])?>?parent_id=' + select1Val,  
  59.                     data: {  
  60.                         "<?=Yii::$app->request->csrfParam?>""<?=Yii::$app->request->getCsrfToken()?>"  
  61.                     },  
  62.                     success: function (res) {  
  63.                         const data = res.data;  
  64.                         var opstr = "<option value='0'>请选择</option>";  
  65.                         if (data.length) {  
  66.                             $.each(data, function (i, n) {  
  67.                                 opstr += " <option value=\"" + n.category_id + "\">" + n.title + "</option>";  
  68.                             });  
  69.                         }  
  70.                         $('#secondSelect').html(opstr);  
  71.                         $('#secondSelect').selectpicker('refresh');  
  72.                         $('#secondSelect').selectpicker('val',<?=$model->subclass_id?>); //给它赋值  
  73.                     }  
  74.                 });  
  75.             }  
  76.         }  
  77.     </script>  
  78. <?php $this->endBlock() ?>  

 

本文来自于:http://www.yoyo88.cn/note/yoyocmf/570.html

下一篇 返回列表
Powered by yoyo苏ICP备15045725号-1