语义UI：下拉框无法select多个选项

Question

我正在尝试实现一个包含语义下拉框的模式 UI。用户应该能够从下拉框中选择 select 多个选项。不幸的是，下拉框仅将最后选择的选项显示为 selected 选项。这是我的完整代码：

<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>

Answer 1

您需要在 class 中指定 'multiple'，因此您的 class 应该是 'ui fluid multiple selection dropdown'。

语义UI：下拉框无法select多个选项

Semantic UI: Dropdown box fails to select multiple options

frontend

drop-down-menu

semantic-ui