Select2 标签的自定义值？

Question

在我的项目中，我希望能够创建一个自定义 select 字段，允许我的用户输入预定义值之外的其他值。

为此，我发现 Select2 Tagging 几乎完成了我想要的工作。但是，它不允许我设置新选项的值。它的值只与我们输入的文本相同。

$(document).ready(function() {
  $('select').select2({
    tags: true,
    width: 330
  })
});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
</head>

<body>
  <select name="country" id="country">
    <option value="th">Thailand</option>
    <option value="vn">Vietname</option>
  </select>

</body>

</html>

但是，如何设置新的选项值及其显示标签，例如 cam:Cambodia？

虽然冒号(":")用作value/text分隔符，但'cam'是值，柬埔寨是select字段中的显示标签？

谢谢。

Answer 1

您可以检测所选选项的文本，将其与值（对于用户生成的选项相同）进行比较，然后在将其分配给该选项的值之前对其进行转换。

下面的代码会将值更改为国家/地区名称的前两个字母。

更新：现在包含了添加具有用户定义值的选项的功能，即 en:England.

代码已完整注释。

如果这不是您想要的，请告诉我。

// Initialise select2
$('select').select2({
  tags: true,
  width: 330
})


// Detect change event
$("#country").change(function() {

  // Get text of selected option
  var selectText = $("#country option:selected").text();

  // Check if value matches text
  // i.e. if this is user generated
  if ($(this).val() == selectText) {

    // Check if colon is used
    if (selectText.indexOf(":") !== -1) {

      // Split text based on colon
      var splitText = selectText.split(":");

      // Create new option, mark as selected
      var newOption = new Option(splitText[1], splitText[0], false, true);

    } else { // If no colon found


      // Create new option, mark as selected
      // Take the first two letters and lower case them
      var newOption = new Option(selectText, selectText.substr(0, 2).toLowerCase(), false, true);


    }

    // Append new option
    $('#country').append(newOption);

    // Prove we've changed the value
    console.log($(this).val());

  }

});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
</head>

<body>
  <select name="country" id="country">
    <option value="th">Thailand</option>
    <option value="vn">Vietname</option>
  </select>

</body>

</html>

Select2 标签的自定义值？

Custom Value for Select2 Tag?

jquery

jquery-select2-4