Preface:

The project was outsourced before, this page involved in a large number of nested logic pull a whole body, so can only be modified on the original basis, I am a back-end to the front-end knowledge is also some understanding of it, the torture is very severe if the great god has a better method, please leave a message

The following are some of the methods I tried, which have now been solved. Simply revert to the process I modified. The code posted is rewritten, not recorded step by step while correcting errors

Change the multiple selection to single selection

1. The JQuery modification

 

$('#catIds').removeAttr('multiple');
Copy the code

It is found that the control can be selected but the ticked prompt or multi-selection state does not need to manually cancel the check to remove the no selection, and after selection will not be like a single box directly to shrink the drop-down column, need to manually, will cause great trouble to the user, HOW many did I choose?

 

2. Use the JS method

document.getElementById("catIds").multiple = false;
Copy the code

Effect: The same as JQ write effect, there are the same problems

3. Check the page elements and find that the multi-selection attribute has been deleted, but there is still the problem of realistic multi-selection

4. The Bootstrap Selectpicker is used to modify the Bootstrap Selectpicker


                            $("#catIds").selectpicker({
                                width : 300.actionsBox:true.// Drop down options to add checked all and unchecked buttons
                                countSelectedText:"Item {0} selected".selectedTextFormat:"count > 5".multiple:"false"}); $('#catIds').selectpicker('render');
                            $('#catIds').selectpicker('refresh');
Copy the code

You can see that the execution succeeded (the size of the input box has been changed) but it is still multiple

Ok, this doesn’t work either. Let’s try another way

I will write a label to replace it in the main line (mode 5, mode 6 is to write the article by hand, the original one has been deleted).

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

(This is the previous code will not screenshot demo, the result is still not good!!)

6. All substitutions are invalid. Did I make a mistake in substitutions? That’s another way of substituting

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

I think you’ve guessed the result! Still no! This makes me anxious, is there no solution? Put a night to sleep when a flash of inspiration, with delete in the way of adding is not on the line!

7. Come to work the next morning,

Start write delete then add node (for convenience I added two SPAN tags in the select outer layer)(another reason bootstarp will weave in other style or event nodes in the select outer layer, interested friends can write a demo You can then view the page elements in your browser.)

 

    $("#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);
Copy the code

Ha ha, so always line! Test found that delete the original will not add new??????? When emMM finds append elements, it can use append()

  $("#catIds_span_id_b").remove();
  var ii = $('<select class="form-control" data-live-search="true" id="catIds">');
  // Replace with radio
  $("#catIds_span_id_a").append(ii);
Copy the code

Test found successful!!!! Think this is the end of it? No, no, no, no, no, no, no, no, no, no

CatIds_span_id_b = span catIds_span_id_b = span catIds_span_id_b = span catIds_span_id_b = span catIds_span_id_b = span catIds_span_id_b = span catIds_span_id_b = span catIds_span_id_b

9. Use empty() to empty child elements

Since we can clean out child elements, we don’t need a span with id :catIds_span_id_b

HTML is modified to

 // Delete the original
 $("#catIds_span_id_a").empty();
 var ii = $('<select class="form-control" data-live-search="true" id="catIds">');
 // Replace with radio
 $("#catIds_span_id_a").append(ii);
Copy the code

Perfect solution at last!

10. Single choice replaced by multiple choice to use the way to draw inferring from one another, I am a pure backend to modify it into such a very tired heart, I hope to help other students