获取所选选项以使用语义 UI 下拉菜单显示

Question

我在使用语义 UI 下拉菜单时遇到一些问题：

我似乎无法 jquery 处理它。我试过给它添加名为"tagline"的class，点击它会触发提示，但是没有用。然而，class "tagline" 添加到其他元素时，效果很好
我无法从要显示的菜单选项中获取选定的值。当我尝试：$('#idDropDown').dropdown('get value'));，它给了我结果 "object Object"。这是代码：

show.ejs:

<% include ../partials/header %>
<div class = "container-fluid text-center" style = "margin-top: 100px;">
    <h1 class = "student-title">Student's homepage</h1>
</div>

<!-- Testing -->
<div class = "container text-center student-list">
    <div id = "dropdownMenu" class="ui fluid search selection dropdown">
        <input type="hidden" name="student">
        <i class="dropdown icon"></i>
        <div class="default text">Select a student</div>
        <div class="menu">
            <% students.forEach(function(student) { %>
                <div class = "item" value = "<%=student._id%>" >
                    <%= student.name.first %> <%= student.name.last %>
                </div>
            <% }); %>
        </div>
    </div>
</div> 
<!-- End of div-->


<% include ../partials/footer %>

main.js

/* global $ */

$(document).ready(function(){
    $('.ui.dropdown').dropdown();
});

$(".tagline").on("click", function() {
    getValue();
    // console.log(test);
});

$('.message .close').on('click', function() {
  $(this).closest('.message').fadeOut();
});



function getValue(){
    alert($('ui.dropdown').dropdown('get value'));
}

我是第一次使用 Semantic UI，因为它的可定制性更高并且有更多的组件（我认为）。任何帮助将不胜感激。非常感谢！

编辑：

这是 jsfiddle：

https://jsfiddle.net/7hw9txns/1/

关于我的问题 1，jQuery 在这里工作得很好，但它在我的 Cloud9 应用程序中不起作用 IDE（jQuery 与任何其他组件一起工作我的应用程序的页面，只是不是这个特定的页面和下拉菜单）

Answer 1

我意识到你的代码没问题，但它不起作用，因为你没有在你的 dropdown id 上调用该行为，而是调用了一个通用名称 (ui.dropdown)。
我在那 plugin 中读到：

Get value(行为) - Returns 当前下拉输入值
在这种情况下，它只有 returns 所选选项的两个字母。

Get text (行为) - Returns 当前下拉文本
在这种情况下，它 returns 整个选定文本到 dropdown 上的每个项目。

最后，这里是fiddle我改的：fiddle link

希望我已经说清楚了！

获取所选选项以使用语义 UI 下拉菜单显示

Getting selected option to display with Semantic UI dropdown menu

html

javascript

css

jquery

semantic-ui