Tuesday, 7 May 2019

Multiple selection in dropdown?
step 1: Download the below attachments.
1) jquery.multiselect.js
2) Multiselect.css

step 2:create the web page and place the below code.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     <script src="Scripts/jquery-3.3.1.min.js"></script>
    <script src="Scripts/jquery.multiselect.js"></script>
    <link href="CSS/jquery.multiselect.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function () {
             $('#fruits').multiselect({
                columns: 1,
                placeholder: 'Select fruits',
                search: true,
                searchOptions: {
                    'default': 'Search fruits'
                },
                selectAll: true
            });
        });     
    </script>
</head>
<body>
    <form id="form1" runat="server">
         <div class="row" style="margin-top:100px;">
            <div class="col-md-3">
                <div class="form-group" id="divCities">
                    <span>Select Fruits</span>
                    <select multiple="multiple" id="fruits" class="3col active">                       
                        <option value="Apple">Apple</option>
                        <option value="Banana">Banana</option>
                        <option value="Orange">Orange</option>
                        <option value="Grape">Grape</option>
                        <option value="mango">mango</option>
                    </select>                   
                </div>
            </div>
        </div> 
    </form>
</body>
</html>

step:3 run the page and check the output.

No comments:

Post a Comment

Top Agile Interview Questions & Answers

Top Agile Interview Questions & Answers 1. What is Agile Testing? The first question of agile interview question tests your k...