Implementation of adding data attribute for appended option element?

[martinbarilik]

Hi, it's me again ;)

To work with multiple selects i need to be able to append data attributes for newly added remove options in whatever way i need.

For example i remotely find Object with name "FOO" and when i choose first option, it has to append option as :

<option value="1" data-whatever="1" selected>FOO</option>

when remove url responds with json:

[{id: 1, whatever: 1, name: "FOO"}]

with select2 i used to do it in processResult method

			processResults: function (data) {
					var $data = [];
					$.each(data, function (i, object) {
						$data.push({
							id: object.id,
							text: object.name,
							'data_whatever': object.whatever
						})
					});

					return {
						results: $data
					};
				},

source: https://select2.org/data-sources/ajax#transforming-response-data

Is this implemented in any way ?

[martinbarilik]

Finally did it. If there is a better way to do it, please let me know

			options.onItemAdd = function (value, $item) { // to remove old options added
				this.input.querySelectorAll('option:not([value=""])').forEach(option => {
					option.remove();
				});
			}

			options.onChange = function (value) {
				let tsOption = this.options[this.items[0]];

				let desirableOption = this.input.querySelector(`option[value="${this.items[0]}"]`);
				desirableOption.dataset.whatever = tsOption.whatever;
			}

                        new TomSelect(select, options);