基於下拉值的圖標更改選擇使用名稱

Question

我有四個ICon onclick功能。圖標名稱

A- Annually 

S-Semi-Annually 

Q-quarterly 

M-Monthly 

四個圖標顯示取決於PoP跌落淹死選擇 我的下拉看起來像圖片：

如果用戶選擇每半年圖標也會改變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/

Answer 1

這是你想要的嗎？

JSfiddle

順便說一句，我改變

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

到

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

因爲他們不爲我工作。所以如果它適合你，你可以改回它。