bootstrap-select icon indicating copy to clipboard operation
bootstrap-select copied to clipboard

Published 20 hours ago • verified publisher icon snapappointments

Cannot clear select options

Open kl4u5 opened this issue 2 years ago • 3 comments

Thanks for a great plugin. I'm trying to clear and repopulate the select. Works in v. 1.13.18 but not in 1.14.0-beta3 These two lines have no effect. $(elemId).empty(); $(elemId).selectpicker('refresh');

Demo error:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Try clear bootstrap-select</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha256-wLz3iY/cO4e6vKZ4zRmo4+9XDpMcgKOvv/zEU3OMlRo=" crossorigin="anonymous">
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha256-+IZRbz1B6ee9mUx/ejmonK+ulIP5A5bLDd6v6NHqXnI=" crossorigin="anonymous"> -->
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css" integrity="sha256-wiMI7buOV5UBzdWN4s4kXqE/LZ794hx5oJOOIQlDBaM=" crossorigin="anonymous"> -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css" integrity="sha256-cwDJdubMsvIJcAYY5EXUZAuQLxSlELxFYQlxvsxdYs8=" crossorigin="anonymous">
    <script>

        function clearSelect(elemId, repopulate) {

            $(elemId).empty();
            $(elemId).selectpicker('refresh');

            if (repopulate) {
                var newOptionsHtml = '';
                newOptionsHtml += '<option value="1">Student 1</option>';
                newOptionsHtml += '<option value="2">Student 2</option>';

                $(elemId).append(newOptionsHtml)
                $(elemId).selectpicker('refresh');
            }
        }
    </script>
</head>
<body>
    <div class="container mt-3" style="max-width: 800px;">
        <h2>Cannot clear bootstrap-select options</h2>

        <div class="mb-3 mt-3">
            <label for="student">Student:</label>
            <select id="student" class="selectpicker">
                <option value="A">Student A</option>
                <option value="B">Student B</option>
            </select>
        </div>

        <button type="button" class="btn btn-primary" onclick="clearSelect('#student', false)">Clear select</button>
        <button type="button" class="btn btn-primary" onclick="clearSelect('#student', true)">Repopulate select</button>
    </div>
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha256-BRqBN7dYgABqtY9Hd4ynE+1slnEw+roEPFzQ7TRRfcg=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha256-lSABj6XYH05NydBq+1dvkMu6uiCc/MbLYOFGRkf3iQs=" crossorigin="anonymous"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha256-GRJrh0oydT1CwS36bBeJK/2TggpaUQC6GzTaTQdZm0k=" crossorigin="anonymous"></script> -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js" integrity="sha256-qo0Cam4XJ0QQ06XnCiCFYBh3GDXU45j3lpUp+em2yBU=" crossorigin="anonymous"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js" integrity="sha256-obLPuLg5xxN2MC2szEaXLaN8tEKYgeCMn+TSPMxqOfE=" crossorigin="anonymous"></script>
</body>
</html>

kl4u5 avatar Nov 30 '22 11:11 kl4u5

I'm using a temporary patch https://github.com/snapappointments/bootstrap-select/issues/2738#issuecomment-1240736229

cdcr1985 avatar Dec 06 '22 22:12 cdcr1985

Thanks @cdcr1985 -- your work around works :)

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Try clear bootstrap-select</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha256-wLz3iY/cO4e6vKZ4zRmo4+9XDpMcgKOvv/zEU3OMlRo=" crossorigin="anonymous">
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha256-+IZRbz1B6ee9mUx/ejmonK+ulIP5A5bLDd6v6NHqXnI=" crossorigin="anonymous"> -->
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css" integrity="sha256-wiMI7buOV5UBzdWN4s4kXqE/LZ794hx5oJOOIQlDBaM=" crossorigin="anonymous"> -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css" integrity="sha256-cwDJdubMsvIJcAYY5EXUZAuQLxSlELxFYQlxvsxdYs8=" crossorigin="anonymous">
    <script>

        function clearSelect(elemId, repopulate) {

       
            let select = $(elemId);            
            select.find('option').remove();    // remove all options            

            if (repopulate) {
                var newOptionsHtml = '';
                newOptionsHtml += '<option value="1">Student 1</option>';
                newOptionsHtml += '<option value="2">Student 2</option>';

                $(elemId).append(newOptionsHtml)
            }
            select.selectpicker('destroy'); // temporary patch!
            select.selectpicker();          // temporary patch!

        }
    </script>
</head>
<body>
    <div class="container mt-3" style="max-width: 800px;">
        <h2>Cannot clear bootstrap-select options</h2>

        <div class="mb-3 mt-3">
            <label for="student">Student:</label>
            <select id="student" class="selectpicker">
                <option value="A">Student A</option>
                <option value="B">Student B</option>
            </select>
        </div>

        <button type="button" class="btn btn-primary" onclick="clearSelect('#student', false)">Clear select</button>
        <button type="button" class="btn btn-primary" onclick="clearSelect('#student', true)">Repopulate select</button>
    </div>
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha256-BRqBN7dYgABqtY9Hd4ynE+1slnEw+roEPFzQ7TRRfcg=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha256-lSABj6XYH05NydBq+1dvkMu6uiCc/MbLYOFGRkf3iQs=" crossorigin="anonymous"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha256-GRJrh0oydT1CwS36bBeJK/2TggpaUQC6GzTaTQdZm0k=" crossorigin="anonymous"></script> -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js" integrity="sha256-qo0Cam4XJ0QQ06XnCiCFYBh3GDXU45j3lpUp+em2yBU=" crossorigin="anonymous"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js" integrity="sha256-obLPuLg5xxN2MC2szEaXLaN8tEKYgeCMn+TSPMxqOfE=" crossorigin="anonymous"></script>
</body>
</html>

kl4u5 avatar Jul 10 '23 21:07 kl4u5

this is my solution and it works: maybe could be a commit in bootstrap-select-1.14.0-beta3.js

  • in bootstrap-select-1.14.0-beta3.js line (more or less) 2789 change
if (!that.multiple || maxOptions === 1) { // Deselect previous option if not multi select
     if (prevData) that.setSelected(prevData, false);
     that.setSelected(clickedData, true);
}

with

if (!that.multiple || maxOptions === 1) { // Deselect previous option if not multi select
     //if (prevData) that.setSelected(prevData, false);
    //that.setSelected(clickedData, true);
    if (prevData) that.setSelected(prevData, !!state);
    that.setSelected(clickedData, !state);
}

mattymatty76 avatar Jul 15 '23 13:07 mattymatty76