Post Detail

JQuery

jQuery Multi Select

by Abdul Rohim
27 December 2020
786 views

Pada Kesempatan ini saya akan membagikan sebuah tutorial mengenai jQuery multi select, langsung saja kita ke scriptnya

Untuk bagian Head

<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

Untuk Body

<body>
    <div class="container">
        <h1 style="margin:150px auto 50px auto; text-align:center">Multiselect JQuery</h1>
        <div class="row">
            <div class="col-xs-5">
                <select name="from" id="undo_redo" class="form-control" size="13" multiple="multiple">
                    <option value="1">Laravel</option>
                    <option value="2">PHP</option>
                    <option value="3">Mysql</option>
                    <option value="4">CSS</option>
                    <option value="5">jQuery</option>
                    <option value="6">Javascript</option>
                </select>
            </div>
            <div class="col-xs-2">
                <button type="button" id="undo_redo_undo" class="btn btn-success btn-block">undo</button>
                <button type="button" id="undo_redo_rightAll" class="btn btn-default btn-block"><i
                        class="glyphicon glyphicon-forward"></i></button>
                <button type="button" id="undo_redo_rightSelected" class="btn btn-default btn-block"><i
                        class="glyphicon glyphicon-chevron-right"></i></button>
                <button type="button" id="undo_redo_leftSelected" class="btn btn-default btn-block"><i
                        class="glyphicon glyphicon-chevron-left"></i></button>
                <button type="button" id="undo_redo_leftAll" class="btn btn-default btn-block"><i
                        class="glyphicon glyphicon-backward"></i></button>
                <button type="button" id="undo_redo_redo" class="btn btn-danger btn-block">redo</button>
            </div>
            <div class="col-xs-5">
                <select name="to" id="undo_redo_to" class="form-control" size="13" multiple="multiple"></select>
            </div>
        </div>
    </div>
</body>

Untuk script nya

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script
    src="https://www.jqueryscript.net/demo/Two-side-Multi-Select-Plugin-with-jQuery-multiselect-js/js/multiselect.js">
</script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#undo_redo').multiselect();
    });
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-36251023-1']);
    _gaq.push(['_setDomainName', 'jqueryscript.net']);
    _gaq.push(['_trackPageview']);

    (function () {
        var ga = document.createElement('script');
        ga.type = 'text/javascript';
        ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') +
            '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(ga, s);
    })();
</script>

Untuk hasilnya seperti dibawah ini

multiselect_1