基于下拉值的图标更改使用名称选择

Question

我有四个ICon onclick功能。 ICON名称

A- Annually 

S-Semi-Annually

Q-quarterly  

M-Monthly 

四个图标显示取决于Pop drop drown select 我的下拉看起来像图片：

如果用户半年选择ICON也会在此处更改S.

  <div class="modal"id="mymodal1" role="dialog">
            <div class="pop-dialog">
                <!-- Modal content-->
                <div class="pop-info"style="top: 100px;width:220px">
                <div class="pop-header">
                        <button id="Button1" class="pop-closebtn shadow-inset pull-right" data-dismiss="modal">
                            X</button>
                        <p>&nbsp</p>
                    </div>
select name="monthlymipfrequency" id="myForm1" >
            <option value="monthly"  name="a"  id="monthly1" >Monthly</option>
            <option value="quarterly"  name="a" id="quarterly1" >Quarterly</option>
            <option value="semianually" name="a"  id="semianually1"  >Semi Anually</option>
            <option value="anually"    name="a" id="anually1" selected="selected" >Anually</option>
          </select>
           <!--     </div>-->



           <div class="pop-footer">
                <button id="cancel" class="dont-compare shadow-inset" data-dismiss="modal">Cancel</button>
                <button id="trigger1" type="button" class="dont-compare shadow-inset">Save</button>
            </div>
        </div>
    </div>
</div>

我的剧本：

 var id;
    var eve;
    var ImageName;
    function changeperiod1(event, _id, _src) {
        id = _id;
        eve = event;
        //alert(_id);
        var img = _src.substring(_src.lastIndexOf('/') + 1);
        ImageName = img;
       $('#mymodal1').modal()
        if (ImageName == "A.png") {
            //alert(ImageName);
            $("#anually1").prop('checked', true);
            $("#semianually1").prop('checked', false);
            $("#quarterly1").prop('checked', false);
            $("#monthly1").prop('checked', false);
            $("#myForm1").val('anually');
        }
        if (ImageName == "Q.png") {
            //alert(ImageName);
            $("#quarterly1").prop('checked', true);
            $("#anually1").prop('checked', false);
            $("#semianually1").prop('checked', false);
            $("#monthly1").prop('checked', false);
            $("#myForm1").val('quarterly');

        }
        if (ImageName == "S.png") {
            // alert(ImageName);
            $("#semianually1").prop('checked', true);
            $("#quarterly1").prop('checked', false);
            $("#anually1").prop('checked', false);
            $("#monthly1").prop('checked', false);
             $("#myForm1").val('semianually');

        }
        if (ImageName == "M.png") {
            //alert(ImageName);
            $("#monthly1").prop('checked', true);
            $("#semianually1").prop('checked', false);
            $("#quarterly1").prop('checked', false);
            $("#anually1").prop('checked', false);

             $("#myForm1").val('monthly');
        }
        // $('#save').hide();
        $('#trigger1').prop('disabled', true);
        $('#trigger1').addClass('disabledButton');
      }
    var value;
    $('#myForm1 input').on('change', function () {
        value = $('input[name="a"]:checked', '#myForm1').val();
        $('#trigger1').prop('disabled', false);
        $('#trigger1').removeClass('disabledButton');
    });
    $('#trigger1').on('click', function () {
        if (value == "anually") {

            $(eve.target).attr("src", "Content/Images/A.png");



        }
        if (value == "semianually") {
            $(eve.target).attr("src", "Content/Images/S.png");

        }
        if (value == "quarterly") {
            $(eve.target).attr("src", "Content/Images/Q.png");


        }
        if (value == "monthly") {
            $(eve.target).attr("src", "Content/Images/M.png");


        }
        $('#mymodal1').modal('hide');
    });

ICON没有改变，我无法保存？请帮我 ？我真的被这个困住了吗？ mY jsfiddle LInk：https://jsfiddle.net/8nb35dq7/