javascript - 如何获取当前 collection_select 选择的字符串值

Question

我有一个 collection_select 允许客户选择另一个客户。我还有一个按钮，单击该按钮时，应该会触发一个 javascript 函数，该函数会找到所选客户的字符串值，并将其添加到页面上的列表中。

HTML:

<%= f.collection_select :id,
                     Customer.where(business_id: current_customer.business_id),
                     :id,
                     :full_name,
                     { prompt: 'Select' },
                     { id: "colleage-select", onChange: "renderColCal(this)" } %>

<button id="click-me" type="button">
    <img  src="https://cdn4.iconfinder.com/data/icons/basic-ui-elements/700/07_plus-128.png" alt="Add to Event" style="width: 50px"/>
</button>

<div>
   <p>Meeting Participants:</p>
   <ol id ="list">
   </ol>
</div>

Javascript:

$(function (){
    $("#click-me").click(function (e){
        e.preventDefault();
        var List = document.getElementById('list'); 

        var name = document.getElementById('colleague-select').textContent; //this should get whatever name is currently in the collection_select
        var entry = document.createElement("li");

        entry.appendChild(document.createTextNode(name));
        List.appendChild(entry);

        return false;

    });
});

但是，这并没有在我的列表中添加任何内容。当我制作测试文本节点时，此函数成功，即 entry.appendChild(document.createTextNode("test"));所以我知道我从 collection_select 中查找客户名称的方式存在问题。 执行此操作的正确方法是什么？谢谢

Answer 1

当您已经将 jQuery 添加到您的项目时，为什么要使用 vanilla javascript。

我会这样重写你的 javascript 代码:

$(function (){
    $("#click-me").click(function (e){
        var list = $("#list") ;
        var name = $("#colleague-select option:selected").text() ;
        var entry = "<li>" + name + "</li>" ;

        list.append(entry);
        return false;
    });
});