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.
- Bootstrap select display error, always display two drop-down multiple selection boxes
- Bootstrap select width problem
- Radio radio button group de duplication
2, Concrete implementation
1. Download and import bootstrap select and Chinese plug-ins
- Bootstrap select Chinese website: https://www.bootstrapselect.cn/
- Github address: https://github.com/silviomoreto/bootstrap-select
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
HTMLclass="selectpicker" and multiple are added to the select tag.
<div id="answer_part_div"> <div id="answer_select_div"> <label for="answer_select"></label> <select multiple required id="answer_select"> <option value="" hidden>Please select a candidate</option> </select> </div> <div id="answer_input_div" style="display: none"> <input type="text" name="answer" placeholder="Please enter a candidate" required> </div> <div> <button id="answer_toggle_btn" title="Switch input"> <i></i> </button> <button id="answer_confirm_btn" title="Confirm add"> <i></i> </button> <button title="delete the selected entry" id="answer_del_btn"> <i></i> </button> </div> </div> <div id="answer_list_div"></div>JS
- 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 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.
- 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.
- 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>" + "<input type='radio' id='" + radio_id + "' value='" + val + "' name='" + unique_id + "'>" + "<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.