CODEWITHSUNDEEP
drop-down-menufrontendsemantic-ui
Deba
Deba

Reputation: 441

Semantic UI: Dropdown box fails to select multiple options

I am trying to implement a modal which contains a dropdown box in Semantic UI. User should be able to select multiple options from the dropdown box. Unfortunately, the dropdown box shows only the last chosen option as selected option. Here's my full code:

<html>
    <head>
    <meta charset="utf-8" />
    <title>Semantic UI</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
</head>
    <body>

        <div class="ui container">
            <div class="ui modal">
                <i class="close icon"></i>
                <div class="header">

                   Modal panel !!!

                </div>
                    <div class="content">
                        <div class="ui container">
                            <select name="categories" multiple="" id="categories" class="ui fluid dropdown">
                               <option value="">Categories</option>
                               <option value="arts">Arts</option>
                               <option value="business">Business</option>
                               <option value="campus">Campus & Alumni</option>
                            </select>  
                        </div>      
                    </div>    

            </div>  
        </div>

        <script>
            $('.ui.modal').modal('show');
            $('#categories').dropdown();
        </script>

    </body> 
</html>

Upvotes: 0

Views: 538

Answers (1)

Morrolan
Morrolan

Reputation: 26

You need to specify 'multiple' in the class, so your class should be 'ui fluid multiple selection dropdown'.

Upvotes: 1

Related Questions