Bootstrap 3 Skeleton

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

by vikaskbh

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<label for="">Text to Select</label>
<input type="text" placeholder="PHP,PERL" id="texts_to_select" class="form-control">(comma separated)
<input type="button" value="Select" class="btn btn-primary" value="Select Multiple" id="select_options">
<br/>(should be CAPS as visible in dropdown and not its value)
<br/>
<div class="code_example">
    <select name="languages" id="languages7" multiple>
        <option value="c">C</option>
        <option value="c++">C++</option>
        <option value="php">PHP</option>
        <option value="perl">PERL</option>
        <option value="ruby">RUBY</option>
        <option value="python">PYTHON</option>
        <option value="go">GO</option>
    </select>
</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 @import url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
 input[type=text] {
    width: 200px;
    display:inline;
    margin-left: 10px;
}
select {
    font-size:24px;
    height: 30px;
    line-height: 30px;
    margin: 10px;
    min-width:300px;
}
.code_example {
    padding-bottom: 50px;
    border-bottom: 1px solid #EEE;
}
h1, h2, h3, h4 {
    font-weight:bold;
    padding-left: 10px;
}
button {
    font-family:arial, sans-serif !important;
}
input[type='button'] {
    margin-left: 10px;
}

JavaScript

(function ($) {
    $('#select_options').on('click', function () {

        if ($.trim('#texts_to_select') == "") return;

        var texts_to_select = $('#texts_to_select').val().split(',');
        var selected_values = [];

        $("#languages7 option").each(function (k, v) {

            if (texts_to_select.indexOf($(v).filter('option').text()) >= 0) {

                selected_values.push($(v).filter('option').val());
            }
        });

        $('#languages7').val(selected_values);


    });
})(jQuery);