Skip to main content
 首页 » 编程设计

jquery-select2之选择2下拉列表但允许用户输入新值

2024年02月24日62开发

我想要一个包含一组值的下拉列表,但也允许用户“选择”此处未列出的新值。

我看到select2如果您在 tags 模式下使用它,则支持此功能,但是有没有办法在不使用标签的情况下做到这一点?

请您参考如下方法:

excellent answer@fmpwizard提供适用于 Select2 3.5.2 及更低版本,但不适用于 4.0.0

从很早开始(但可能没有这个问题那么早),Select2 就支持“标记”:如果您允许,用户可以添加自己的值。这可以通过 tags 选项启用,您可以使用 an example in the documentation 来尝试。 .

$("select").select2({ 
  tags: true 
}); 

默认情况下,这将创建一个与他们输入的搜索词具有相同文本的选项。如果您希望以特殊方式标记所使用的对象,则可以修改该对象,或者在选择该对象后远程创建该对象。

$("select").select2({ 
  tags: true, 
  createTag: function (params) { 
    return { 
      id: params.term, 
      text: params.term, 
      newOption: true 
    } 
  } 
}); 

除了在通过 select2:select 事件传入的对象上充当易于识别的标志之外,额外的属性还允许您在结果中呈现略有不同的选项。因此,如果您想通过在其旁边放置“(新)”来直观地表明它是一个新选项,您可以这样做。

$("select").select2({ 
  tags: true, 
  createTag: function (params) { 
    return { 
      id: params.term, 
      text: params.term, 
      newOption: true 
    } 
  }, 
  templateResult: function (data) { 
    var $result = $("<span></span>"); 
 
    $result.text(data.text); 
 
    if (data.newOption) { 
      $result.append(" <em>(new)</em>"); 
    } 
 
    return $result; 
  } 
});