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

前言:

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

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

将多选修改为单选

1. JQuery修改

$('#catIds').removeAttr('multiple');
复制代码

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

2. 使用JS方法

document.getElementById("catIds").multiple = false;
复制代码

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

3. 通过查看页面元素发现多选属性已经被删除但还是存在现实多选的问题

4. 换了个思路,可能是Bootstrap Selectpicker的样式原因,通过来进行修改


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

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

5. ok 这个也不行那就再换个方式

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

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

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

6. 替换都无效,是不是我替换写错了? 那在换一种替换的方式

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

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

7. 次日早上上班来,

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

    $("#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()方法才可以

  $("#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也就不需要了吧

html修改为

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

最后完美解决!