Why does adding or removing tags not change the "selected" attribute for the corresponding option elements?

Question

I have put together a "tag selector" with the help of the MSFmultiSelect library.

var select = new MSFmultiSelect(document.querySelector("#cars"), {
  autoHide: true,
  searchBox: true,
  theme: 'theme2'
})

.msf_multiselect_container .logger {
  padding: 5px 10px !important;
  font-size: 14px;
  line-height: 1.4 !important;
  color: #555;
  height: auto !important;
  min-height: 34px;
  background-color: #fff;
  border: 1px solid #ccc !important;
  border-radius: 4px;
}

.msf_multiselect_container .selectedLabels {
  margin-bottom: 1px;
}

.msf_multiselect,
.msf_multiselect .searchbox {
  border: 1px solid #ccc !important;
  border-radius: 4px;
  padding: 8px !important;
  margin-top: 2px !important;
}

.msf_multiselect li {
  padding: 3px 6px !important;
  display: flex;
  align-items: center;
}

.msf_multiselect input[type="checkbox"] {
  margin-right: 5px;
  margin-top: 1px;
}

<script src="https://cdn.jsdelivr.net/gh/minisuperfiles/MSFmultiSelect/msfmultiselect.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/gh/minisuperfiles/MSFmultiSelect/msfmultiselect.min.css" rel="stylesheet" />

<form class="p-2">
  <div class="form-group d-flex align-items-center">
    <label for="cars" class="m-0 pr-1">Choose a car:</label>
    <select name="cars[]" id="cars" class="form-control" multiple="multiple">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
      <option value="duser">Duser</option>
      <option value="volkswagen">Wolkswagen</option>
    </select>
  </div>
</form>

The problem I am faced with is that apparently, adding and/or removing tags does not change the "selected" attribute for the corresponding <option> elements.

I need this to happen if I am to use the <select> in a in a full-stack app and save the selected values in a (MySQL) database.

How can I get the desired result?

Answer 1

The selected attribute represents the initial state, not the current state.

Submitting the form or passing it to a FormData object will provide the current values.

var select = new MSFmultiSelect(document.querySelector("#cars"), {
  autoHide: true,
  searchBox: true,
  theme: 'theme2'
})

document.querySelector('form').addEventListener('submit', (e) => {
    e.preventDefault();
    const data = new FormData(e.target);
    console.log([...data.entries()]);
});

.msf_multiselect_container .logger {
  padding: 5px 10px !important;
  font-size: 14px;
  line-height: 1.4 !important;
  color: #555;
  height: auto !important;
  min-height: 34px;
  background-color: #fff;
  border: 1px solid #ccc !important;
  border-radius: 4px;
}

.msf_multiselect_container .selectedLabels {
  margin-bottom: 1px;
}

.msf_multiselect,
.msf_multiselect .searchbox {
  border: 1px solid #ccc !important;
  border-radius: 4px;
  padding: 8px !important;
  margin-top: 2px !important;
}

.msf_multiselect li {
  padding: 3px 6px !important;
  display: flex;
  align-items: center;
}

.msf_multiselect input[type="checkbox"] {
  margin-right: 5px;
  margin-top: 1px;
}

<script src="https://cdn.jsdelivr.net/gh/minisuperfiles/MSFmultiSelect/msfmultiselect.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/gh/minisuperfiles/MSFmultiSelect/msfmultiselect.min.css" rel="stylesheet" />

<form class="p-2">
  <div class="form-group d-flex align-items-center">
    <label for="cars" class="m-0 pr-1">Choose a car:</label>
    <select name="cars[]" id="cars" class="form-control" multiple="multiple">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
      <option value="duser">Duser</option>
      <option value="volkswagen">Wolkswagen</option>
    </select>
    <button>Submit</button>
  </div>
</form>