My solution uses an array to store the multi-selected values.
Here is an example used with contact tags (lots of other functions mixed up in there too!)
It is based on using a Wappler Array called contact_tags.
Sorry for all the spaces… am a bit short of time to tidy it up!
Then some fancy css to make it look half nice…
Hope this helps!
Antony.
<div class="row row_input">
<p class="icon_field c_brown1" dmx-style:visibility="show_input_icon.value==0?'hidden':'visible'"><i class="fas fa-tags" dmx-bs-tooltip="apptext.value.1101"></i></p>
<div class="div_input">
<select id="i_contact_tags" dmx-on:click="show_label.addUniq(1100)" dmx-on:input="show_label.addUniq(1100)"
dmx-bind:options="lookups.data.lookups.where(`lookup_type`, 10, "==").where(`is_a_demo`, show_demo_data.value, "==").where(`is_hidden`, 0, "==").where(`is_deleted`, 0, "==")"
optiontext="lookup_name" optionvalue="id" name="tags" class="input_multi_select" dmx-bind:disabled="view_edit.value=='view'" data-msg-required=""
dmx-on:changed="contact_tags.addUniq(value);f_contact.i_contact_tags.setValue('')" dmx-hide="view_edit.value=='view'" dmx-on:keypress="autosave_contact.start()">
<option value="" selected="">{{apptext.value.1102}}</option>
</select>
<div class="selected_items">
<p class="m-0 d-none" dmx-text="contact_regions.count"></p>
<div dmx-repeat:r_selected_tags="contact_tags.items">
<div class="col selected_item">
<p class="d-none" dmx-text="$value"></p>
<p dmx-text="lookups.data.lookups.where(`id`, $value, "==").values(`lookup_name`)" class="name_multi_select_item"></p>
<p class="selected_item_delete" dmx-on:click="contact_tags.removeAt($key)" dmx-hide="view_edit.value=='view'">
<i class="fas fa-times"></i>
</p>
</div>
</div>
</div>
</div>
<p dmx-on:click="show_help.items.contains(1100)?show_help.remove(1100):show_help.addUniq(1100)" class="icon_help">
<i class="far fa-question-circle"></i>
</p>
</div>
.)