JSFiddle - React, Tailwind, and code Playground

by Fernando De Leon

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.2/underscore-min.js"></script>
<select id="mySelect" class="js-example-basic-multiple" name="states[]" multiple >
  <option data-field_values='{
    "entityID": "89048556-8913-4834-9198-f5a725ef73d7",
    "fullName": "dfdf 222",
    "aptDate": "01 Mar 2022"
  }' value='A'>Alabama</option>
  
  <option data-field_values='{
    "entityID": "89048556-8913-4834-9198-f5a725ef73d7",
    "fullName": "dffd",
    "aptDate": "01 Mar 2022"
  }' value='A'>Mno</option>
</select>

<button id="myBtn">
Press
</button>

<button id="myBtn2">
Press
</button>
<button id="lookArr">
Look at the options
</button>

<textarea id="myTextArea"></textarea>
<br>
<button id="reset">
Reset
</button>

<button id="reset2">
clear 
</button>

JavaScript

var options = [];

$("#mySelect").on("change",(e) => {
  
  var str = "";
  var arr = [];
 
  $("#mySelect option:selected").each(function() {
     str = $(this).val();
    
    
     options.push($(this).get(0).outerHTML);
     options = _.uniq(options,false);
     
     var data = $(this).data('field_values');
     arr.push(data);
   
  });
  console.log(arr);
  
  
  console.log("arr ",arr[0].fullName);
  $("#myTextArea").val(JSON.stringify(arr));
  var obj = JSON.parse($("#myTextArea").val());
  console.log(obj);

});

$("#myBtn").on("click",(e) => {
 var optionHtml = "<option >LOL</option><option >BOB</option>";
 
 $("#mySelect option").remove();
 $("#mySelect").append(optionHtml);

  
})

$("#myBtn2").on("click",(e) => {
 var optionHtml = "<option >LOL</option><option >BOB</option>";
 
 $("#mySelect option").remove();
 $("#mySelect").append(optionHtml);
})

$("#lookArr").on("click",(e) => {
  console.log(options[0]);
  console.log(options.length);
});


$("#reset").on("click",(e) => {
  console.log("about to reset");
  $("#mySelect option").remove();
  options.forEach(anOption => {
    console.log("an option is",anOption);
    $("#mySelect").append(anOption)
  });
  options = [];
});

$("#reset2").on("click",(e) => {
  console.log("about to reset");
  $("#mySelect option").remove();
  
});