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/

it's not working - the single most unhelpful phrase you can use. What isn't working? What is it not doing? What is it doing that it shouldn't be doing? Are you getting console errors in your browser developer tools? Help us to help you — freefaller
– freefaller, Commented Sep 9, 2015 at 15:29

hopkins-matt · Accepted Answer · 2015-09-09 15:25:17Z

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/

edited Sep 9, 2015 at 15:25

answered Sep 9, 2015 at 14:37

hopkins-matt

2,8232 gold badges17 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

samyNathan P Over a year ago

Save button disabled @hopkins-matt. if user change anually Icon also change its not change

samyNathan P Over a year ago

save button not Working Please take look your jsfiddle

hopkins-matt Over a year ago

I have updated the code to work beyond the issues mentioned in your original question. Don't forget to mark this answer as correct (by clicking the checkmark below the number of votes).

Collectives™ on Stack Overflow

Drop down value selected using javascript?

1 Answer 1

Updated

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

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Updated

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

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related