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

为什么在已经为项目添加javascript时使用vanilla jQuery。

我会用这种方式重写你的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;
    });
});

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

1 个答案: