JSFiddle - React, Tailwind, and code Playground

by BenjaminRay

HTML

<!-- These should be in head -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" rel="stylesheet" />

<!-- Body content -->
<div class="row">
    <div class="col-sm-12">
        <div class="form-group">
            <label for="feedback_q1">Hello?</label>
            <select class="form-control selectpicker show-tick" name="feedback_q1[]" id="feedback_q1" multiple="multiple" title="Choose...">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
        </div>
    </div>
</div>
<div class="row hide">
    <div class="col-sm-12">
        <div class="form-group">
            <label for="feedback_q1_desc">desc <span class="glyphicon glyphicon-pencil"></span>

            </label>
            <textarea name="feedback_q1_desc" id="feedback_q1_desc" class="form-control" data-toggle="tooltip" data-placement="top" title="אנא פרט" rows="2"></textarea>
        </div>
    </div>
</div>

<!-- These should be at the end of <body> -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>

CSS

.hide {
    display: none;
}

JavaScript

$(function () {
        $('.selectpicker').selectpicker();
        $('select[multiple]').each(function () {
            $(this).change(function () {
                var obj = '#' + $(this).attr('id') + '_desc';
                // Handle scenario where nothing is selected
                if ($(this).val() == null) {
                    $(obj).parent().parent().parent().addClass('hide');
                    $(obj).css('display', 'none');
                    return;
                }
                var vals = $(this).val();
                // Handle scenario where something is selected
                for (i = 0; i < vals.length; i++) {
                    if ($(this).val()[i] == "4") {
                        $(obj).parent().parent().parent().removeClass('hide');
                        $(obj).css('display', 'block');
                        return; // Stop checking as we know the value we want is selected
                    } else {
                        $(obj).parent().parent().parent().addClass('hide');
                        $(obj).css('display', 'none');
                    }
                }
            });
        });
    });