Adding options to select class="selectpicker" does not work #2765

idhamari · 2022-07-20T12:37:37Z

idhamari
Jul 20, 2022

I tried this:

          <!DOCTYPE html>
            <html>
                <head>
                    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
                    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.8.1/css/bootstrap-select.css">
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.8.1/js/bootstrap-select.js"></script>
                    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
                    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
                    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

                </head>
                 <body>

                        <label>  &nbsp  X data (multiple select):</label> 
                        <select id="xData" class="selectpicker" multiple data-live-search="true"> 
                                <option> "x a" </option>
                                <option> "x b" </option>
                                <option> "x c" </option>
                        </select>
                        <br><br><br>
                        <label>  &nbsp  Y data (multiple select):</label> 
                        <select id="yData"> 
                                <option> "y a" </option>
                                <option> "y b" </option>
                                <option> "y c" </option>
                        </select>

                    <br>
                <button id="uX" type="button" onclick="updateX" style="color:black; background: lightgreen">Update X</button>';
                    <br>
                <button id="uY" type="button"  onclick="updateY"style="color:black; background: lightgreen">Update Y</button>';

                    <script>        
                        var dataLst=["new a ","new  b","new c"];
                        function updateX(){
                            console.log("updateX .............");
                            var  selectElement=  document.getElementById("xData");
                            var  numOptions = selectElement.options.length
                            console.log(numOptions);
                            // remove all options
                            for(var i=0; i< numOptions; i++) {
                                selectElement.remove(numOptions-i-1);
                            }
                            //create new options
                            for (var i=0; i<dataLst.length; i++){
                                var option = document.createElement("option");
                                option.text  = dataLst[i];
                                selectElement.appendChild(option);
                            }
                            console.log(selectElement.options.length);
                        }
                        function updateY(){
                            console.log("updateY .............");
                            var  selectElement=  document.getElementById("yData");
                            var  numOptions = selectElement.options.length
                            console.log(numOptions);
                            // remove all options
                            for(var i=0; i< numOptions; i++) {
                                selectElement.remove(numOptions-i-1);
                            }
                            //create new options
                            for (var i=0; i<dataLst.length; i++){
                                var option = document.createElement("option");
                                option.text  = dataLst[i];
                                selectElement.appendChild(option);
                            }
                            console.log(selectElement.options.length);
                        }

                        const buX = document.querySelector('#uX');
                        buX.addEventListener('click',  updateX);

                        const buY = document.querySelector('#uY');
                        buY.addEventListener('click',  updateY);

                    </script>
                        
                        </body>
            </html>

Y is updated but X not !!!

Based on feedback from @TravelTimN it seems to work on codepen!!!

TravelTimN · 2022-07-20T13:39:20Z

TravelTimN
Jul 20, 2022

@idhamari

Try this codepen

Does it work like your own?

1 reply

TravelTimN Jul 20, 2022

Ah! I notice on this version of your code, you've showed the entire CDN links.
Those weren't available completely on the original post.

I see you've got two versions of Bootstrap now.
3.2.0 and 5.2.0
This could be causing some issues on your side.

I've just re-tested the pen using version 3.2.0 as well, and it's working just fine still.

idhamari · 2022-07-20T14:42:43Z

idhamari
Jul 20, 2022
Author

@TravelTimN Thanks for your feedback! The code above is updated. I forgot to add the jquery link.
Without the jquery, the options are indeed updated but I don't get the desired behavior. The first select has multi-selection feature hence the use of boost. When I remove the older boost version, the multiselection effects do not work anymore. It seems select does not support the recent boost version. I needed the recent version of boost to solve another issue so it should be used.

1 reply

TravelTimN Jul 20, 2022

Ah. Seems this plugin works similar to the "dirty little secret" in MaterializeCSS.

The <select> element is actually not used, so targeting your ID will not work.
There's a whole different menu generated on the DOM, and places the text into nested elements div > ul > li > span.

You would need a heavy amount of JS/jQuery to do what you're trying to accomplish.

I did something similar a couple years back for MaterializeCSS with their <select> elements.
Can read more here on Materialize Issue 6049.
With a demo on codepen.

I'm not sure what your use-case is here, or what you're trying to accomplish (why do you need JS to change the values of the options?), but hopefully helps explain "why" that isn't working. You have to inspect the elements on the DOM to see what's "really" going on behind the magic curtain.

idhamari · 2022-07-20T16:49:12Z

idhamari
Jul 20, 2022
Author

Thanks for the info and your effort to explain.

I'm not sure what your use-case is here, or what you're trying to accomplish (why do you need JS to change the values of the options?),

It is part of a larger code that replaces the options interactively from a data file based on a user selection. Shall I report a bug so maybe one of the boost developers takes a look?

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adding options to select class="selectpicker" does not work #2765

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments 2 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

Adding options to select class="selectpicker" does not work #2765

idhamari Jul 20, 2022

Replies: 3 comments · 2 replies

TravelTimN Jul 20, 2022

TravelTimN Jul 20, 2022

idhamari Jul 20, 2022 Author

TravelTimN Jul 20, 2022

idhamari Jul 20, 2022 Author

idhamari
Jul 20, 2022

Replies: 3 comments 2 replies

TravelTimN
Jul 20, 2022

idhamari
Jul 20, 2022
Author

idhamari
Jul 20, 2022
Author