After removing option from select and materialized, selection funktions inproperly

31 views Asked by At

I'm working on a profile selector. It has a select box containing every user, and when selecting one of the users, it should remove the user from the select box and place the user initials into a pill-list beneath.

The first select change after reload functions properly, but every attempt after that seems to select the option under what is actually selected.

Further more, the functions run correctly if the select box isn't materialized after being destroyed.

Here is some jQuery code:

function reset_user_id(elm, id){
    $(elm).materialSelect({"destroy": "true"});
    $(elm).find('option:selected').remove();
    $(elm).val("")

    // THIS SEEMS TO BE THE PROBLEM
    $(elm).materialSelect();
}

function change_add_user_list(elm) {
    let selected_value = $(elm).val();
    let initials = $(elm).find('option:selected').html();
    $('.dist_initials').append('<div class="d-inline-block bg-primary py-1 px-3 small rounded-pill mr-1 mb-1" id="'+selected_value+'" data-icon="<?=ROOT_FOLDER?>img.php?ma_id='+selected_value+'"><span>'+initials+'</span> <i class="cursor-pointer">×</i></div>');
    console.log(selected_value + ' - ' + initials);
    reset_user_id(elm, selected_value);        
}

And some HTML

<select class="mdb-select md-form colorful-select dropdown-primary" searchable="Søg her..." data-placeholder="Vælg her" data-visible-options="-1" id="select_user" onchange="change_add_user_list(this);">
<option value="" disabled selected id="first_option">Choose user</option>
<option value="1">" data-icon="img.php?user=1" class="rounded-circle" data-secondary-text="Name">User Initials</option>
<option value="1">" data-icon="img.php?user=1" class="rounded-circle" data-secondary-text="Name">User Initials</option>
....
</select>

<div class="dist_initials"></div>

I simply want the correct option to be pushed to the pill list.

I've tried making the function, which works unless I materialize it again. I've tried removing the whole select element and generating a new one, which didn't work either.

0

There are 0 answers