JS动态控制Select下拉列单选多选 multiple Bootstrap Selectpicker 样式 无法被修改的问题

前言:

项目是之前外包出去的,这个页面牵扯了大量的嵌套逻辑 牵一发动全身 所以只能在原基础上进行修改,本人是个后端 对前端知识也是有些了解而已,折腾的挺厉害 如果大神有更好的方法请留言

下边是我尝试的一些方法,现在已经解决  简单还原一下我修改的过程 贴的代码是重新写的,并非改错的时候一步一步记录的

将多选修改为单选

1. JQuery修改
   1.  

        $('#catIds').removeAttr('multiple');

      发现可以单选 但是控件的已勾选提示还是多选的状态不会需要将没选择的手动取消 对号才能去掉,  并且选择后 不会像单选框那样直接将下拉列缩起来,需要手动,会对用户造成很大的困扰,我到底选了几个?
      
       
   2. 使用JS方法

       document.getElementById("catIds").multiple = false;

      效果: 同JQ写的效果一样,存在相同问题
      

   3. 通过查看页面元素发现 多选属性已经被删除 但还是存在现实多选的问题,
      
      
      换了个思路,可能是Bootstrap Selectpicker的样式原因,通过来进行修改

   4.                 
                                  $("#catIds").selectpicker({
                                      width : 300,
                                      actionsBox:true, //在下拉选项添加选中所有和取消选中的按钮
                                      countSelectedText:"已选中{0}项",
                                      selectedTextFormat:"count > 5",
                                      multiple:"false",
                                  });
                                  $('#catIds').selectpicker('render');
                                  $('#catIds').selectpicker('refresh');

      
      可以看到 执行成功 (输入框大小已经被改变) 但是 还是多选 
       

   5. ok 这个也不行那就再  换个方式 我自己写个标签替换进去总行了吧(方式5,方式6 是写文章自己手写的 原来写的已经被删了)

      1.  $('<select class="form-control selectpicker" data-live-search="true" id="catIds" multiple="multiple"> </select>').replaceAll("#catIds");

         (这是之前的代码就不截屏演示了, 结果还是不行!!!) 
          

   6. 替换都无效,是不是我替换写错了?

      1. 那在换一种替换的方式

          $("#catIds").replaceWith('<select class="form-control selectpicker" data-live-search="true" id="catIds" > </select>');

         我想你已经猜到结果! 还是不行! 这就让我着急了,难道无解?   放了一天 晚上睡觉的时候灵机一闪,用删除 在添加的方式不就行了嘛!

   7. 次日早上上 班来,开始写 删除 再添加节点 (为了方便我在该select外层添加了两个span标签 )(还有一个原因 bootstarp 会在 该select外层织入其他的样式或者事件节点,有兴趣的朋友可以 写一个demo 然后通过浏览器查看页面元素可以看到)
      

      1. 
          

             $("#catIds_span_id_b").remove();
             var ii = $('<select class="form-control selectpicker" data-live-search="true" id="catIds" > </select>');
              $("#catIds_span_id_a").html(ii);

         哈哈 ,这样总行了吧!  测试发现 删除掉原来的了 不会加进去新的??????? WC这什么情况 
         emmm发现追加元素用 append()方法才可以

   8.    $("#catIds_span_id_b").remove();
         var ii = $('<select class="form-control" data-live-search="true" id="catIds">');
         // 替换成单选
         $("#catIds_span_id_a").append(ii);

      测试发现 成功!!!!  以为这样就完了?  no no no
      发现点击再次触发该 事件后他会不停的在后边追加
      
      
      想了一下 应该是每次都是删除  id为:catIds_span_id_b的元素,但是第二次已经不存在该元素 不能再在添加的时候再套一层 id为catIds_span_id_b 的span吧???

   9. 用empty() 方法清空子元素

      既然可以清空子元素了那id为:catIds_span_id_b 的span也就不需要了吧

      1. html修改为
         
         

      2.  // 删除原来的
          $("#catIds_span_id_a").empty();
          var ii = $('<select class="form-control" data-live-search="true" id="catIds">');
          // 替换成单选
          $("#catIds_span_id_a").append(ii);
         

         最后完美解决!

   10. 单选替换成多选使用方式 举一反三即可,本人一个纯后端 折腾成这样修改出来 也是十分的心累,希望能帮到其他同学