使用javascript选择的下拉值？

Question

我使用了一个包含四种值的下拉列表

1. 每年
2.每半年
3.每季
4.每月

它的值总是使用onclickICON变化，默认值为anually。如果用户将其更改为 semianually，则 ICON 会将 A 更改为 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  >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);
    }
    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');
});

它不起作用，我犯了什么错误？请帮我。我的 Jsfiddle 链接：https://jsfiddle.net/htcLcu4d/

Answer 1

嗯，你的小提琴没有加载 jQuery。此外，.modal() 不包含在 jQuery 中。您需要 Bootstrap 或 jQuery UI。我更改了您的代码以使用 .val() 函数来更新所选值。我还更改了小提琴以包含 jQuery 和 Bootstrap。

更新

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');
});

演示：https://jsfiddle.net/hopkins_matt/htcLcu4d/7/