JavaScript、jQuery - 检索下拉列表中的项目名称

Question

我试图弄清楚如何获取所选产品的名称label_method: :name，如表单中所示。我可以检索所选项目的 id，如 js 部分所示。

_form.html.erb

<%= f.simple_fields_for :items, wrapper: false do |builder| %>

<%= builder.input :product_id, collection: Product.all, 
    label_method: :name, value_method: :id, label: false, 
    placeholder: 'Type or select item', input_html: { :multiple => true, 
    id: 'select2-product' } %>

js

$("#select2-product").click(function() {
 var selectedItem = $(this);
 console.log("selectedItem " + selectedItem);
 console.log("selectedItem.val() " + selectedItem.val());
});

控制台输出

 selectedItem [object Object] 
 selectedItem.val() 1 

观察

selectedItem.val() 给出下拉列表中所选元素的 :id

selectedItem.text() 给出下拉列表中的所有项目。我怎样才能只选择一个？正如@Amir 的回答

Answer 1

这应该可行，实际上您需要选择 text 而不是 value，因此 text() 为您提供实际的文本该项目

console.log("selectedItem.text() " + selectedItem.text());

<强> Live demo

$('selectedItem:selected').text() for the selected text specifically