语义UI:“下拉框”无法选择多个选项

时间:2018-07-27 08:31:50

标签: drop-down-menu frontend semantic-ui

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

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

1 个答案:

答案 0 :(得分:1)

您需要在课程中指定“多个”,因此您的课程应为“用户界面多选下拉菜单”。