Bootstrap select drop-down multiple selection box + selected item add radio button group

1, Problem description

For the requirements encountered in the work, the drop-down radio box needs to be changed into a drop-down multi box, so the bootstrap select plug-in is used to complete it. This drop-down radio box can be switched to an input box through buttons, and the selected items or input items are added as radio radio buttons. The following problems were encountered during the process.

  1. Bootstrap select display error, always display two drop-down multiple selection boxes
  2. Bootstrap select width problem
  3. Radio radio button group de duplication

2, Concrete implementation

1. Download and import bootstrap select and Chinese plug-ins

introduce:

<link href="static/bootstrap4/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="static/bootstrap4/css/bootstrap-select.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="static/bootstrap4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="static/bootstrap4/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="static/bootstrap4/js/defaults-zh_CN.js"></script>

2. Implementation of bootstrap select drop-down multiple selection

HTML

class="selectpicker" and multiple are added to the select tag.

<div class="row" id="answer_part_div">
	<div class="col-sm-10" id="answer_select_div">
        <label for="answer_select"></label>
        <select class="selectpicker" multiple required id="answer_select">
            <option value="" hidden>Please select a candidate</option>
        </select>
    </div>
    <div class="col-sm-10" id="answer_input_div" style="display: none">
        <input type="text" name="answer" class="form-control" placeholder="Please enter a candidate" required>
    </div>
    <div class="col-sm-2 m-auto">
        <button class="btn btn-sm btn-primary" id="answer_toggle_btn" title="Switch input">
            <i class="fas fa-keyboard"></i>
        </button>
        <button class="btn btn-sm btn-success" id="answer_confirm_btn" title="Confirm add">
            <i class="fas fa-check"></i>
        </button>
        <button class="btn btn-sm btn-danger" title="delete the selected entry" id="answer_del_btn">
           <i class="fas fa-minus"></i>
        </button>
   </div>
</div>
<div id="answer_list_div" class="col-sm-12 mt-5"></div>

JS

  1. Solve the problem of displaying two multi check boxes

Because this is a system similar to the questionnaire, each question + option div is a template. Each time the questioner clicks the add question button, he will copy this div template. Maybe there is a problem with using the bootstrap select plug-in when copying, and it will be in the answer_ select_ Div two bootstrap select drop-down boxes are displayed under this Div. The solution is to clear answer after each problem is added_ select_ Div, and then add the drop-down multiple selection box again. (that is, the content in answer_select_div written in the HTML file is invalid, and the HTML content is directly inserted in JS)

// Bootstrap select is used here. There is a slight problem in the display. You need to clear the answer first_ select_ Div, and then insert answer_select
var answer_select_div = $("#answer_select_div");
answer_select_div.empty();
// Insert answer_select
var answer_select = $("<select class='selectpicker' multiple required id='answer_select' data-width='100%'></select>");
answer_select_div.append(answer_select);
// Get answer_select
var select = $(".selectpicker");
// Insert options, here is an example
select.append("<option value='' hidden>Please select a candidate</option>");
//Use the refresh method to update the UI to match the new state.
select.selectpicker('refresh');
//The render method forces the bootstrap to be re rendered - select the ui.
select.selectpicker('render');

Note that select.selectpicker('refresh ') and select.selectpicker('render') must be called, otherwise the UI cannot be updated.

  1. Solve the width problem of the drop-down check box

Problem: setting the following content in css will cause layout overflow when too many items are selected.

/*Adjust the width of the drop-down check box*/
.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
    width: 100%;
}

Solution: consult the bootstrap select document and use the data width attribute to define the width. The following four optional values are available.

  • The width of auto: select is determined by the widest content in option;
  • fit: the width of the select is determined by the width of the actually selected option;
  • 100px: the width of select is defined as 100px;
  • 50%: set the width of the select to 50% of the width of the parent container.
  1. Check the item or input box to insert the item as a radio button group
$(document).on("click", "#answer_confirm_btn", function () {
    var cur_div = $(this).parents("#a_div");
    var err_msg = "";
    var unique_id = cur_div.parents(".qa_div").attr("id");

    // Determine whether the input box is visible
    var input_visible = cur_div.find("#answer_input_div").is(":visible");
    // Insert entered options
    if (input_visible) {
        // Get input
        var input_val = cur_div.find("input[name='answer']").val();

        // Input content judgment
        if (input_val === "") {
            err_msg = "Option content cannot be empty";
        }
        $.each(cur_div.find("#answer_list_div label"), function (i, obj) {
            if (input_val === obj.textContent) {
                err_msg = "Option already exists";
            }
        });
        if (err_msg) {
            show_toast(err_msg);
            // Clear candidate content
            cur_div.find("input[name='answer']").val("");
            return;
        }

        // Insert options
        insertRadio(cur_div, unique_id, input_val);

        // Empty submitted candidate content
        cur_div.find("input[name='answer']").val("");
    }
    // Change multiple options
    else {
        // Get multiple selection array
        var select_val = cur_div.find("#answer_select").val();
        // Deletes the first null value in the array
        if (select_val.length && select_val[0] === "") {
            select_val.shift();
        }
        // Option content judgment
        if (select_val.length === 0) {
            err_msg = "Option content cannot be empty";
        }
        if (err_msg) {
            show_toast(err_msg);
            return;
        }

        // Traversal array, insert options
        select_val.forEach(function (val) {
            insertRadio(cur_div, unique_id, val);
        });
    }
});
// Insert options
function insertRadio(cur_div, unique_id, val) {
    // duplicate removal
    var isExisted = false;
    var answer_list = cur_div.find(".custom-radio input");
    // Traverse radio
    if(answer_list) {
        $.each(answer_list, function (i, answer) {
            if(answer && $(answer).val() === val) {
                isExisted = true;
            }
        })
    }
    // If it already exists, it will not be inserted
    if(!isExisted) {
        // New radio
        var radio_id = unique_id + "_" + val;
        var new_radio = $("<div class='custom-control custom-radio'>" + "<input type='radio' id='" + radio_id + "' value='" + val + "' name='" + unique_id + "' class='custom-control-input'>" + "<label class='custom-control-label' for='" + radio_id + "'>" + val + "</label>" + "</div>");
        cur_div.find("#answer_list_div").append(new_radio);
    }
}

The original effect is to change multiple options each time and clear answer_ list_ Div, re insert the multi selected option, cur_div.find("#answer_list_div").empty(); Insert options again. However, this will result in the loss of the radio option manually entered in the input box. Therefore, the method of inserting the option after judging whether it is repeated in the insertRadio method is adopted.

3, Reference blog

Multiple components selected from the bootstrap drop-down list

Detailed explanation of bootstrap select multi selection + fuzzy query drop-down box (Interpretation of official example documents)

The bootstrap select plug-in dynamically added option cannot be displayed

Tags: Javascript Front-end JQuery html css

Posted on Mon, 20 Sep 2021 04:56:29 -0400 by Dinosoles