JSFiddle - React, Tailwind, and code Playground

by gbos

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<!DOCTYPE html>
<html>

    <head>
        <script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <meta charset=utf-8 />
        <title>JS Bin</title>
    </head>

    <body>
        <select data-bind="dynamicSelectValue: val, opts: listOptions"></select>
        <input data-bind="value: val">
    </body>

</html>

JavaScript

ko.bindingHandlers.dynamicSelectValue = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        var value = valueAccessor();
        var $element = $(element);
        $element.change(function() {
            value($element.find('option:selected').val());
        });
    },
    update: function(element, valueAccessor, allBindingsAccessor) {

        var value = valueAccessor(),
            allBindings = allBindingsAccessor();
        var $element = $(element);
        var options = ko.utils.unwrapObservable(allBindings.opts);
        $element.find('option').remove();
        $.each(options, function(i, v) {
            var selected = "";
            if (v.id == value()) {
                selected = "selected";
            }
            $('<option value="' + v.id + '" ' + selected + ' >' + v.label + '</option>').appendTo($element);
        });
        value($element.find('option:selected').val());
    }
};

var list = [{
        id: 1,
        label: "abcd"
    },
    {
        id: 2,
        label: "bbbb"
    },
    {
        id: 3,
        label: "cccc"
    },
    {
        id: 4,
        label: "dddd"
    }

];

var Model = function() {
    var self = this;
    self.val = ko.observable(3);
    self.listOptions = ko.observableArray(list);
};

ko.applyBindings(new Model());