jQuery addClass example

Change class name on click in jQuery

by bemulima

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>
<select id="formadditional-age_from" class="form-control" name="FormAdditional[age_from]">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>

<select id="formadditional-age_to" class="form-control" name="FormAdditional[age_to]">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>

JavaScript

const select2Conf = {
            allowClear: true,
            minimumResultsForSearch: -1,
            width: 200
        },
        age_to_item = $('#formadditional-age_to'),
        age_from_item = $('#formadditional-age_from'),
        age_option_list = $('option', age_from_item).clone();
        
age_from_item.select2({
  ...select2Conf,
  placeholder: 'From',
});

age_to_item.select2({
  ...select2Conf,
  placeholder: 'To',
});

age_from_item.on('select2:select', function(e){
        let data = e.params.data,
            val = age_to_item.val();

        age_to_item
            .html(age_option_list.filter(o => age_option_list[o].value === '' || parseInt(age_option_list[o].value)>=parseInt(data.id)))
            .val(val).trigger('change');

    });

age_to_item.on('select2:select', function(e){
  let data = e.params.data,
      val = age_from_item.val();

  age_from_item
    .html(age_option_list.filter(o => age_option_list[o].value === '' || parseInt(age_option_list[o].value)<=parseInt(data.id)))
    .val(val).trigger('change');
});

age_from_item.on('select2:clearing', function(e){
        $(this)
            .html(age_option_list)
            .val("").trigger('change');
            
  			age_to_item
            .html(age_option_list)
            .val("").trigger('change');
    });