javascript - 获取选择的选项以使用语义 UI 下拉菜单显示

Question

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

1. 我似乎无法让 jquery 处理它。我试图给它添加名为“tagline”的类，当它被点击时会触发一个警报，但它不起作用。但是，将类“标语”添加到其他元素时效果很好

2. 我无法从要显示的菜单选项中获取选定的值。当我尝试:$('#idDropDown').dropdown('get value')); 时，它给了我结果“object Object”。这是代码:

显示.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 %>

主要.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'));
}

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

编辑:

1. 这是 jsfiddle:

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

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

Answer 1

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

获取值(行为)- 返回当前下拉输入值
在这种情况下，它只返回所选选项的两个字母。

获取文本(行为)- 返回当前下拉文本
在这种情况下，它会将整个选定文本返回到 dropdown 上的每个元素。

最后，这是我更改的 fiddle :fiddle link

希望我已经说清楚了!