如何将选项值更改为图标弹出值?

时间:2015-09-08 13:52:51

标签: javascript jquery html jquery-ui

我之前的旧UI代码工作选择选项值。我的代码的输入字段名称为Monthly MIP,其外观类似于

<tr>
        <td>Monthly MIP </td>
        <td>
          <input name="monthlymippc" type="text" size="8" maxlength="8" onChange="javascript:monthlyMIPPcChanged(true)" />
        %</td>
        <td>Or $

          <input name="monthlymipamt" type="text" size="8" maxlength="8" onChange="javascript:monthlyMIPAmountChanged(true)"/>
          </td>
        <td>
          <select name="monthlymipfrequency">
            <option value="monthly">Monthly</option>
            <option value="quarterly">Quarterly</option>
            <option value="semianually">Semi Anually</option>
            <option value="anually" selected>Anually</option>
          </select>
        </td>
      </tr>

它的所有值下拉选项现在我已更改新的UI代码选择选项更改ICON OnClick

我的新设计看起来像:  enter image description here

我的新代码有旧的UI选择选项ICON onclick如果我点击图标A显示POPUP。弹出的值有Old Ui选项值..

<script>
//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()
        if (ImageName == "A.png") {
            //alert(ImageName);
            $("#annual").prop('checked', true);
            $("#semi").prop('checked', false);
            $("#querter").prop('checked', false);
            $("#month").prop('checked', false);
        }
        if (ImageName == "Q.png") {
            //alert(ImageName);
            $("#querter").prop('checked', true);
            $("#annual").prop('checked', false);
            $("#semi").prop('checked', false);
            $("#month").prop('checked', false);

        }
        if (ImageName == "S.png") {
            // alert(ImageName);
            $("#semi").prop('checked', true);
            $("#querter").prop('checked', false);
            $("#annual").prop('checked', false);
            $("#month").prop('checked', false);

        }
        if (ImageName == "M.png") {
            //alert(ImageName);
            $("#month").prop('checked', true);
            $("#semi").prop('checked', false);
            $("#querter").prop('checked', false);
            $("#annual").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');
    });

</script>

此图标onclick脚本。和我的弹出代码

<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>
                <div class="pop-body" style="text-align:left">
                    <form  name="monthlymipfrequency" id="myForm1"style="padding-left: 50px;">

 <p><input id="annual" name="a" type="radio" class="period" value="anually"/> &nbsp Annual</p>
<p><input id="semi" name="a" type="radio" class="period" value="semianually" /> &nbsp Semi-Annual</p>
 <p><input id="querter" name="a" type="radio" class="period" value="quarterly" /> &nbsp Querterly</p>
  <p><input id="month" name="a" type="radio" class="period" value="monthly" /> &nbsp Monthly</p>

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

我在新用户界面中通过了我的OLD UI代码它不起作用?请帮我 ?我希望将旧的IU选择选项值传递给New UI onclick pop up function.thanks提前

我的OLD ui lINK:OLD UI LINK

我的新用户界面:NEW UI LINK

0 个答案:

没有答案