Thursday 27 October 2016

Chosen dropdown and validation

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="openOffice.aspx.cs" Inherits="AngTEst.openOffice" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
//CSS and JS Start
    <link href="Assets/css/bootstrap.css" rel="stylesheet" />
    <link href="Assets/css/chosen.css" rel="stylesheet" />
    <script src="Assets/js/jquery.min.js"></script>
    <script src="Assets/js/bootstrap.js"></script>
    <script src="Assets/js/chosen.jquery.js"></script>
//CSS and JS End

//Script Start 

    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnSelect').click(function () {
                if ($('#ddlName').val() == 0) {
                    if ($("#ddlName").hasClass('chosen-select')) {
                        $("#ddlName_chosen").css("border", "1px solid red")
                    }

                }
                $('#ddlName').change(function () {
                    if ($('#ddlName').val() != 0) {
                        $("#ddlName_chosen").css("border", "0")
                    }
                });

                $('#ddlName').val(0);
                $('#ddlName').trigger("chosen:updated");


            });

        });
        $(function () {
            $(".chosen-select").chosen();
        });
    </script>
//Script End

</head>
<body>
    <form id="form1" runat="server">
        <div class="container">
              <div class="row">
                <div class="col-md-6">
                    <strong>Name:</strong>
                    <select id="ddlName" class="form-control chosen-select">
                        <option value="0">Select</option>
                        <option value="1">Bhimsen</option>
                        <option value="2">Shiv</option>
                        <option value="3">Shakti</option>
                        <option value="4">Avnish</option>
                    </select>
                </div>

                <div class="col-md-6">
                    <input type="button" id="btnSelect" value="Reset" />
                </div>
            </div>
        </div>

    </form>
</body>
</html>

No comments:

Post a Comment