JSFiddle - React, Tailwind, and code Playground

by Halit Yurttas

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css">
<div id="app">
<!-- ko foreach: models -->
<select data-bind="options: $root.domains, optionsValue: 'Value', optionsText: 'Text', select2multiValues: DomainIds" style="width: 100%" multiple="true">

</select>
<!-- /ko -->
</div>

JavaScript

ko.bindingHandlers.select2multiValues = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        $(element).select2({multiple: true});
        $(element).val(valueAccessor()()).trigger('change');
        $(element).on('select2:select', function (e) {
					valueAccessor()($(element).val());
        });
        $(element).on('select2:unselect', function (e) {
					valueAccessor()($(element).val());
        });
        ko.utils.domNodeDisposal.addDisposeCallback(el, function () {
          $(el).select2('destroy');
      	});
    },
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        $(element).val(valueAccessor()()).trigger('change');
    }
};

var s2app = function () {
	var self = this;
  self.domains = [{"Disabled":false,"Group":null,"Selected":false,"Text":"patirti.com","Value":"3cba57ad-8541-45fe-65da-08da2204455c"},{"Disabled":false,"Group":null,"Selected":false,"Text":"nesrinden.com","Value":"96712145-90f6-4120-4620-08daa0662b99"}];
  self.models = ko.mapping.fromJS([{"CMSLayoutPageId":"b44ef962-aa66-44f4-ca1b-08da801b6afa","CultureLanguageId":"b043d804-0107-41de-8a78-08da220456e5","DomainIds":["3cba57ad-8541-45fe-65da-08da2204455c","96712145-90f6-4120-4620-08daa0662b99"],"RefId":"29b42fad-fca7-46b9-8a69-08dab5a2f438","Title":"Muhammedin Deneme Etiketi (Sakın Ellemeyin.)","Url":"maminin-etiketi","OldUrl":"maminin-etiketi","MetaDescription":"MuhamMuhammedin Deneme Etiketi (Sakın Ellemeyin.)medin Deneme Etiketi (Sakın Ellemeyin.)","MetaKeywords":"MuhamMuhammedin Deneme Etiketi (Sakın Ellemeyin.)medin Deneme Etiketi (Sakın Ellemeyin.)","MetaTitle":"Muhammedin Deneme Etiketi (Sakın Ellemeyin.)","OpenGraphData":"Muhammedin Deneme Etiketi (Sakın Ellemeyin.)","Content":null}]);
};
window.s2appins = new s2app();
$(document).ready(function () {
	ko.applyBindings(window.s2appins, document.getElementById("app"));
});