JSFiddle - React, Tailwind, and code Playground

by praveen_jegan

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/0.9.14/chosen.jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/0.9.14/chosen-sprite.png"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/0.9.14/chosen.css">
<div class="control-group">
    <label class="control-label" for="cbxLanguage">Edition language<span class="text-error"> *</span>
    </label>
    <div class="controls">
        <select name="cbxLanguage" id="ContentPlaceHolder1_cbxLanguage" class="chzn-select" data-placeholder="choose a language..." required="Language required" style="width: 210px;">
            <option value="1">English</option>
            <option value="2">French</option>
            <option value="3">Spanish</option>
        </select>
    </div>
</div>

CSS

#test {
    width: 100px;
    height: 100px;
    background: #ffb;
    padding: 10px;
    border: 2px solid #999;
}

JavaScript

$(document).ready(function () {
    $('.chzn-select').each(function () {
        if ($(this).html().trim().length > 0) {
            console.log($(this));
            pimpSelect($(this));
        }
    });

});

function pimpSelect(select, options) {
    var prepend = '';
    if (select.attr('data-placeholder')) {
        prepend = '<option></option>';
    }
    if (options) {
        options = prepend + options;
        select.empty().html(options);
    } else {
        select.prepend(prepend);
    }
    if (select.hasClass('chzn-select')) {
        var _width = select.css('width');
        select.chosen({
            width: _width
        });
    }
}