Test Live: jQuery Select2 Multi-select Array Valye in Input on Select

<!doctype html>
<html lang="en">
<head>
<title>Test Live: jQuery Select2 Multi-select Array Valye in Input on Select</title>

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>
<body>
<h1>jQuery Select2 Multi-select Array Valye in Input on Select</h1>
<select id="mySelect" multiple="multiple" style="width: 300px;" data-placeholder="Select items">
  <option value="apple" data-designation="my designation 1" data-countrycode= "+91" data-mobile="1234567891" data-email="roshan1@gmail.com">Apple</option>
  <option value="banana" data-designation="my designation 2" data-countrycode= "+91" data-mobile="1234567892" data-email="roshan2@gmail.com">Banana</option>
  <option value="cherry" data-designation="my designation 3" data-countrycode= "+91" data-mobile="1234567893" data-email="roshan3@gmail.com">Cherry</option>
  <option value="date" data-designation="my designation 4" data-countrycode= "+91" data-mobile="1234567894" data-email="roshan4@gmail.com">Date</option>
</select>
<br><br>
<input type="text" style="width:300px;" value="" name="customer_kind_attention_data_hidden" id="customer_kind_attention_data_hidden">
<script>
  $('#mySelect').select2({
    placeholder: $('#mySelect').data('placeholder'),
    allowClear: true
  });
</script>
<script>
  let selectionOrder = [];

const $select = $('#mySelect').select2();

$select.on('select2:select', function (e) {
    const val = e.params.data.id;
    
    // Add to order if not already selected
    if (!selectionOrder.includes(val)) {
      selectionOrder.push(val);
      forceSelectionOrder();
      updateHiddenInput();
    }
  });

$select.on('select2:unselect', function (e) {
    const val = e.params.data.id;
    
    // Remove from order
    selectionOrder = selectionOrder.filter(item => item !== val);
    forceSelectionOrder();
    updateHiddenInput();
  });

Go to Tutorialdeep Homepage