JSFiddle - React, Tailwind, and code Playground

by gurkavcu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<select name="xxx" id="xxxid" data-bind="options: dataList,  value: selectedLength , optionsText: 'name', optionsValue: 'id', optionsCaption: 'Please Select...'"></select>


<select name="xxx2" id="xxxid2" data-bind="options: dataList,  selectedOptions: multiSelectedLength , optionsText: 'name', optionsValue: 'id', optionsCaption: 'Please Select...'" size="5" multiple="true"></select>

JavaScript

dataList = [ {name:'length1',id:1},{name:'length2',id:2},{name:'length3',id:3},{name:'length4',id:4},{name:'length5',id:5} ]
    

var editOfferViewModel = { 
 selectedLength: ko.observable(),
 multiSelectedLength: ko.observableArray()    
}; 

ko.applyBindings(editOfferViewModel); 

$(document).ready(function() {
    editOfferViewModel.selectedLength(2);
    editOfferViewModel.multiSelectedLength(['2','3']);
    
});