JSFiddle - React, Tailwind, and code Playground

by belzebu

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-2.3.0.js"></script>

<select data-bind="options: types, optionsCaption: '* Select *', optionsText: 'name', optionsValue: 'id', value: model.idSelected "></select>

<select data-bind="options: types, optionsCaption: '* Select *', optionsText: 'name', optionsValue: 'id', value: model.idSelected "></select>
<br>
Selected ID on First Combo: <b data-bind="text: model.idSelected"></b><br />
Selected ID on Second Combo: <b data-bind="text: model.idSelected"></b>
    
<!-- How can I make the Dropdownboxes be independent but use the same options that are in the "Type" var? -->

JavaScript

var types = [
        { id: 1, name: 'One' }, 
        { id: 2, name: 'Two' }, 
        { id: 3, name: 'Three' } 

    ];
    function model() {
        var self = this;
        self.id = ko.observable(0);
        self.idSelected = ko.observable();
    }

    var viewModel = {};
    viewModel.model = new model();
    viewModel.types = types;
    ko.applyBindings(viewModel);