如何使用 selectize.js 获取选定的 id 和文本值。流星？答案

【问题标题】：How to get get selected id and text value using selectize.js. meteor?如何使用 selectize.js 获取选定的 id 和文本值。流星？
【发布时间】：2016-12-07 17:21:43
【问题描述】：

我通过这个例子使用 selectize 和流星： meteor is not working with selectize.js

Template.hello.onRendered(function(){
$('#select-links').selectize({
  maxItems: null,
  valueField: 'id',
  searchField: 'title',
  options: [
    {id: 1, title: 'DIY', url: 'https://diy.org'},
    {id: 2, title: 'Google', url: 'http://google.com'},
    {id: 3, title: 'Yahoo', url: 'http://yahoo.com'},
  ],
  render: {
    option: function(data, escape) {
      return '<div class="option">' +
          '<span class="title">' + escape(data.title) + '</span>' +
          '<span class="url">' + escape(data.url) + '</span>' +
        '</div>';
    },
    item: function(data, escape) {
      return '<div class="item"><a href="' + escape(data.url) + '">' + escape(data.title) + '</a></div>';
    }
  },
  create: function(input) {
    return {
      id: 0,
      title: input,
      url: '#'
    };
  }
});

});
<!-- html -->
<template name="hello">
<select id="select-links" placeholder="Pick some links..."></select>
</template>

所以在 onChange 事件上我想得到 p>

值和id

将该值保存到数据库中。

结果可能是这样的：{id: 1, text: google}

那我该怎么做呢？

来自流星的新手

【问题讨论】：

标签： javascript jquery meteor selectize.js

【解决方案1】：

您可以利用 selectize 开箱即用的 onChange 回调。这是一个工作示例。

import { Template } from 'meteor/templating';
import { $ } from 'meteor/jquery';
import { _ } from 'meteor/underscore';

import selectize from 'selectize';

import './main.html';
import 'selectize/dist/css/selectize.css';

const selectLinks = [
  { id: 1, title: 'DIY', url: 'https://diy.org' },
  { id: 2, title: 'Google', url: 'http://google.com' },
  { id: 3, title: 'Yahoo', url: 'http://yahoo.com' },
];

const getLinkTitle = (id) => {
  let title;
  if (id) {
    const selectedLink = _.find(selectLinks, (link) => {
      return link.id === parseInt(id);
    });
    if (selectedLink) {
      title = selectedLink.title;
    }
  }
  return title;
};

Template.body.onRendered(function onRendered() {
  $('#select-links').selectize({
    maxItems: null,
    valueField: 'id',
    searchField: 'title',
    options: selectLinks,
    render: {
      option: function(data, escape) {
        return '<div class="option">' +
            '<span class="title">' + escape(data.title) + '</span>' +
            '<span class="url">' + escape(data.url) + '</span>' +
          '</div>';
      },
      item: function(data, escape) {
        return '<div class="item"><a href="' + escape(data.url) + '">' + escape(data.title) + '</a></div>';
      }
    },
    create: function(input) {
      return {
        id: 0,
        title: input,
        url: '#'
      };
    },
    onChange: function (values) {
      if (values) {
        values.forEach((value) => {
          // Can save to your collection/database here; for now 
          // just logging in the format you requested.
          console.log({
            id: value,
            text: getLinkTitle(value)
          });
        });
      }
    }
  });
});

【讨论】：

感谢您的回答@hwillson 它对我有用。

【解决方案2】：

注意这一点：

const getLinkTitle = (id) => {   let title;   if (id) {
    const selectedLink = _.find(selectLinks, (link) => {
      `return link.id === parseInt(id);`
    });
    if (selectedLink) {
      title = selectedLink.title;
    }   }   return title; };

 `return link.id === parseInt(id);`

注意那行代码。这取决于你的身份证。我正在使用 mongoDB，所以它在我的实际应用程序中不再是一个数字。

【讨论】：