Wednesday, September 20, 2017

jQuery Chosen Plugin

jQuery Chosen Plugin
HTML File:
----------------
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.js"></script>
    <script>
     var arrValues;
        $(document).ready(function () {
            $html = '<select  class="html-multi-chosen-select1" multiple="multiple" id="myselect">';
            $html += '<option value="1">one</option>';
            $html += '<option value="2">two</option>';
            $html += '<option value="3">three</option>';
            $html += '<option value="4">four</option>';
            $html += '</select>';
            $('#divMain').html($html);
            $('.html-multi-chosen-select1').chosen({ width: "210px" });
            $("#btnRead").click(function () {
                var arrValues = $("#myselect").chosen().val();
                $("#lblValues").html(arrValues.toString());
                console.log(arrValues);
                for (var i = 0, len = arrValues.length; i < len; i++) {
                    console.log(arrValues[i]);
                }
            });         
            $("#btnSetValue").click(function () {
                 $('.html-multi-chosen-select1').val('2');
                 $('.html-multi-chosen-select1').trigger('chosen:updated');
            });         
        });
    </script>
</head>
<body>
    <div id="divMain"></div>
    <button type="button" id="btnRead">Read Values</button>
    <button type="button" id="btnSetValue">Set value 2</button><br>
    <label id="lblValues"></label>
</body>
</html>

 OutPut:
------------

No comments:

Post a Comment