Drop down value selected using javascript?

Question

I have used a drop down list that has four types of values

1.anually
2.semianually
3.quarterly
4.Monthly

Its value always uses onclick ICON change, the default value is anually. If the user changes it to semianually the ICON changes A to s. This is my select option code:

<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  >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>

I have four option values. This my script

 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);
    }
    if (ImageName == "Q.png") {
        //alert(ImageName);
        $("#quarterly1").prop('checked', true);
        $("#anually1").prop('checked', false);
        $("#semianually1").prop('checked', false);
        $("#monthly1").prop('checked', false);

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

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

    }
    // $('#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');
});

It's not working, what mistake did I make? Please help me. My Jsfiddle Link: https://jsfiddle.net/htcLcu4d/

Answer 1

Well, your fiddle is not loading jQuery. Also, .modal() is not included in jQuery. You need Bootstrap or jQuery UI. I changed your code to use the .val() function to update the selected value. I have also changed the fiddle to include jQuery and Bootstrap.

Updated

JS:

//popup for Period
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('show');
    if (ImageName == "A.png") {
        //alert(ImageName);
        $("#myForm1").val('anually');
    }
    if (ImageName == "Q.png") {
        //alert(ImageName);
        $("#myForm1").val('quarterly');
    }
    if (ImageName == "S.png") {
        // alert(ImageName);
        $("#myForm1").val('semianually');
    }
    if (ImageName == "M.png") {
        //alert(ImageName);
        $("#myForm1").val('monthly');
    }
    // $('#save').hide();
    $('#trigger1').attr('disabled', true);
    $('#trigger1').addClass('disabledButton');
}
var value;
$('#myForm1').on('change', function(){
    value = $('#myForm1').val();
    $('#trigger1').attr('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');
});

Demo: https://jsfiddle.net/hopkins_matt/htcLcu4d/7/