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

Featured Post

Protect an API by using OAuth 2.0 with Azure Active Directory and API Management

Protect an API by using OAuth 2.0 with Azure Active Directory and API Management https://docs.microsoft.com/en-us/azure/api-management/api-...

Popular posts