JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<select name="bgPosition" id="bgPosition">
<option value="left top" selected="selected">Left Top</option>
<option value="left center">Left Center</option>
<option value="left bottom">Left Bottom</option>
<option value="center top">Center Top</option>
<option value="center center">Center Center</option>
<option value="center bottom">Center Bottom</option>
<option value="right top">Right Top</option>
<option value="right center">Right Center</option>
<option value="right bottom">Right Bottom</option>
</select>
<select name="bgRepeat" id="bgRepeat">
<option value="repeat" selected="selected">Repeat All</option>
<option value="repeat-x">Repeat X</option>
<option value="repeat-y">Repeat Y</option>
<option value="no-repeat" selected="selected">No Repeat</option>
</select>
<select name="bgSize" id="bgSize">
<option value="auto" selected="selected">Auto</option>
<option value="cover">Cover</option>
</select>
JavaScript
var template = [{"mainBgImgPosition":"right bottom","mainBgImgRepeat":"no-repeat","mainBgImgSize":"cover"}]
function setActiveOption(el,val){
$(el).find('option:selected').removeAttr('selected');
$(el).find('option[value="'+val+'"]').attr('selected','selected');
}
jQuery(function($){
var Builder = {
initialized: false,
initialize: function(){
if (this.initialized)
return;
this.initialized = true;
setActiveOption('#bgPosition',template[0].mainBgImgPosition)
setActiveOption('#bgRepeat',template[0].mainBgImgRepeat)
setActiveOption('#bgSize',template[0].mainBgImgSize)
}
}
Builder.initialize();
});