Option not selected

[abelardolg]

Hi there,

I have this code:

 $('#retention').remove(); // A previous instance of this dual list box.
for(let i  = 0; i < allCategories.length; i++) {

                        for(let j  = 0; j < selected.length; j++) {
                            let toggleSelected = (selected[j].id===allCategories[i].id)
                                ? " selected='selected'"
                                : ""
                            ;
                            options += '<option value="' + allCategories[i].id + '"' + toggleSelected + '>'
                                + allCategories[i].name
                                + '</option>';
                        }
                    }
                    console.log(options);

As you can see, the final statement is a console.log where is displayed the following result:
<option value="6">TEst</option><option value="5">Categoría 2</option><option value="4" selected='selected'>Categoría 1</option>

Again, as you can see, the last option has the selected attribute.

After doing this, the following lines were written:

document.getElementById("retentionDiv").style.display = "block";

                    // I get a clean instance of this object
                    $('#retention').multi({ non_selected_header: 'Categorías de retención disponibles',
                        selected_header: 'Categorías de retención que aplican'
                    });

                    $("#retention").append(options);

The issue here is none of these items are selected:

What should happen?
The last item should be selected and moved into the right select

What happens?
None of them are selected.

[abelardolg]

I modified the following code (please, note the selected header has a '2' at the end)

$('#retention').multi({ non_selected_header: 'Categorías de retención disponibles',
                        selected_header: 'Categorías de retención que aplican2'
                    });

why isn't this change showed?

[abelardolg]

The original element

<div class="form-group" id="retentionDiv">
                                <label class="col-sm-2 control-label" for="retention">Cat.Retención</label>
                                <div class="col-sm-7">
                                        <select multiple="multiple" name="retention[]" id="retention">
                                            {% for retention in retention_categories %}
                                              <option value="{{retention.id}}">{{retention.name}}</option>
                                            {% endfor %}
                                        </select>
                                </div>
                            </div>

has an Id = "retention" but:

the rendered element doesn't have any id. Hence, when I add a selected option, it isn't selected.
I am not acting over the original element.
¿?

[abelardolg]

When I add new options, I need to refresh/rebuild this component so it reflects these changes in its options: how would it be, please?

[fabianlindfors]

Hi! You're right that multi.js needs to be refreshed whenever the underlying select element changes. The simplest way to do this is to trigger the change event on the select element. Could you give that a try?

[abelardolg]

I suggest to automatically do it whenever the user selects an option.

I will give that a try. :) Best regards.

[brunojimenezh]

Hi Abelardo, were you able to refresh the multi.js? I tried with the change event but it didn't work. Did it work for you? Can you put the code? Thanks!