html - Convert javascript of checkbox to select type

Question

Earlier the code for the checkbox was

<li class="list-group-item">
       <div class="form-check">
        <label class="form-check-label">
          <input type="checkbox" class="form-check-input common_check" value="<?= $row['Year']; ?>" id="Year"><?= $row['Year'];  ?>
        </label>
       </div>
  </li>

and js for this to get the filtered text was

function get_filter(text_id)
{
  var filterData = [];
  $('#'+text_id+':checked').each(function(){
     filterData.push($(this).val());
   });
  return filterData;
}

Now if I want to turn this to select option menu bar

<option class="common_check" value="<?= $row['Year']; ?>" id="Year"><?= $row['Year'];  ?>

So what should be the javascript for this??

question from:https://stackoverflow.com/questions/65873596/convert-javascript-of-checkbox-to-select-type

Answer 1

There are a couple of things you need to change:

1. It looks like you are allowing the user to select multiple option. For that, make sure multiple attribute is assigned to your select element.

2. Add an onchange handler to your select

3. Filter all selected indexes

<select id="mySelect" onchange="handler()" multiple>
   <option id="some-id" value="some-value"></option>
</select>

var filtered;
function handler() {
    const selector = document.getElementById('mySelect');
    const selected = Array.prototype.filter.call(selector.options, o => o.selected);
    filtered = selected.map(s => s.value);
}

Every time you change an option (deselecting it, or adding one) the handler will reassign the array. This will save you the effort of keeping the array unique by not having to check the array every time to see if the value already exists or not.