jQuery Firing on.Change Событие при каждом изменении

Question

Я застрял со следующей проблемой. У меня есть поле выбора, которое включает в себя магазины. Я хочу отображать другое значение каждый раз, когда значение окна изменяется. Пока код работает отлично, хотя событие on.Change срабатывает только один раз, а затем ничего не делает, если значение select снова изменяется. Можете ли вы указать мне правильное направление здесь?

<script>
    jQuery(function($){
      $('#shop-select').on('change', function () {
          var url = $(this).val();
          var flyer1 = 'TODO:URL';
          var flyer2 = 'TODO:URL';
          switch (url) {
             case "Shop1":
             url = flyer2
             $('#flipbook-container').html(url);
             break;
             case "Shop2":
             url = flyer2
             $('#flipbook-container').html(url);
             break;
             case "Shop3":
             url = flyer1
             $('#flipbook-container').html(url);
             break;
          }
          return false;
      });
    });
</script>

Answer 1

Если все одинаково, в #flipbook-container ничего не изменится, поэтому я добавил что-то другое, чтобы показать вам, что оно входит в событие изменения

jQuery(function ($) {
//if the event is delegated change 
//`$('#shop-select').on('change', function () {` to 
//`$('body').on('change','#shop-select' function () {`
    $('#shop-select').on('change', function () {
        var url = $(this).val();
        var flyer1 = 'TODO:URL';//this is the same with flyer2
        var flyer2 = 'TODO:URL';//this is the same with flyer1
        var value = $(this).val();
        switch (url) {
            case "Shop1": // this case and the next one are the same so don't expect any changes
                url = flyer2;
                $('#flipbook-container').html(url + " JUST TO SHOW IT IS ENTERING here : " + value);
                break;
            case "Shop2":
                url = flyer2;
                $('#flipbook-container').html(url + " JUST TO SHOW IT IS ENTERING here : " + value);
                break;
            case "Shop3":// it will never enter it the case is `case "Shop1":` or `case "Shop2":`
                url = flyer1;
                $('#flipbook-container').html(url + " JUST TO SHOW IT IS ENTERING here : " + value);
                break;
        }
        return false;
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="shop-select">
    <option value="Shop1">Shop1</option>
    <option value="Shop2">Shop2</option>
    <option value="Shop3">Shop3</option>
</select>
<div id="flipbook-container">

</div>