javascript - 根据使用名称选择的下拉值更改图标

Question

我有四个ICon onclick函数。图标名称

A- Annually 

S-Semi-Annually

Q-quarterly  

M-Monthly 

四个 Icon 显示取决于 Pop drop 淹没选择 我的下拉菜单看起来像图片:

如果用户选择半年一次图标也会更改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');
    });

图标没有改变，我无法保存？请帮我 ？我真的被这个困住了吗？我的 jsfiddle 链接:https://jsfiddle.net/8nb35dq7/

Answer 1

这是你想要的吗？

JSfiddle

顺便说一句，我改变了

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

至

$('#mymodal1').show();    
$('#mymodal1').hide();

因为它们不适合我。因此，如果它适合您，您可以将其更改回来。