JSFiddle - React, Tailwind, and code Playground

by nikoshr

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script type="text/x-handlears-template" id="options">
<select>
    {{#each option}}
    		{{#if selected}}
        	<option value="{{id}}" selected="selected">{{name}}</option>
        {{else}}
        	<option value="{{id}}">{{name}}</option>
        {{/if}}
    {{/each}}
</select>
</script>

JavaScript

var data = {"id": 3};
var data_options = {
    "option":[
        {
            "id": 1,
            "name": "John Doe"
        },
        {
            "id": 2,
            "name": "James Don"
        },
        {
            "id": 3,
            "name": "John Don"
        },
        {
            "id": 4,
            "name": "James Doe"
        }
    ]
};

var i, opt;
for (var i=data_options.option.length-1; i>=0; i--) {
	opt = data_options.option[i];
  if (opt.id === data.id) {
		opt.selected = true;
    break;
  }
}

var tpl = Handlebars.compile($('#options').html());
$('body').append(tpl(data_options));