时间戳

首页 > 解决方案 > Custom Value for Select2 Tag?

jquery - Custom Value for Select2 Tag?

问题描述

Within my project, I would like to be able to create a custom select field that allow my user to enter other value beside the pre-defined.

For that I found Select2 Tagging that done the job almost what I want. However, it does not allow me to set the value for new option. The value of it is only the same as the text we have entered.

$(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>

However, how can I set the new option value and its display label this like cam:Cambodia, for example?

While colon(":") is used as a value/text separator, the 'cam' is the value, and Cambodia is a display label inside select field?

Thanks.

标签： jqueryjquery-select2-4

解决方案

You can detect the text of the selected option, compare it to the value (which is the same for user generated options) and then transofrm this before assigning it to the value of that option.

The code below will change the value to the first two letters of the country name.

Update: have now included the ability to add an option with a user defined value, i.e. en:England.

The code is fully commented.

Let me know if this wasn't what you wanted.

// 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>

推荐阅读