Question

我有选择选项，值中有

        <select name="d11" id="d">
                <option hidden> Next 3 months</option>
                <option value ="3"> Next 3 months</option>
                <option value ="6"> Next 6 Month</option>
                <option value = "12">Next 12 Month</option>
         </select>

在jQuery的帮助下，我可以显示更改输入框上的文本，例如当用户单击下三个月时，我需要显示 它应该显示（sep-dec） 一切都取决于点击。

问题：

但是问题是窗口加载时该值发生了变化，并且它显示了文本（接下来的3个月），但我希望Sep-dec及其在未加载窗口时的工作效果很好

这是脚本

         $("#d").change(function() {
            var $this = $( this );
           if (this.value == "3") {

              $this.find( "option:first" ).text( '' + "{{ Date('M 
              Y',strtotime("0 month"))}} - {{ Date('M Y',strtotime("+3 
               month"))}}" ).val("3").prop( 'selected', true )

          }
         else if(this.value == "6")
         {
           $this.find( "option:first" ).text( '' + "{{ Date('M 
          Y',strtotime("0 month"))}} - {{ Date('M Y',strtotime("+6 
          month"))}}" ).val("6").prop( 'selected', true )

         }

     else{
            $this.find( "option:first" ).text( '' + "{{ Date('M 
             Y',strtotime("0 month"))}} - {{ Date('M Y',strtotime("+12 
              month"))}}" ).val("12").prop( 'selected', true )



           }
         } )

window.onload = function() {

var selItem = sessionStorage.getItem("6");

$('#d ').val(selItem);

}
$('#d').change(function() { 
    var selVal = $(this).val();
    sessionStorage.setItem("6", selVal);
});

任何人都可以帮助

Answer 1

如果我理解正确，那么通过UI选择一个值就可以完成所需的工作，但是将其设置为存储值的onload代码却没有。

那是因为在这种情况下不会触发'change'事件。

尝试：

window.onload = function() {

    var selItem = sessionStorage.getItem("6");

    $('#d').val(selItem).trigger('change');

}

Answer 2

您可以在下面的代码行中使用

$(document).ready(function () {
            $("#d").change(function () {
                var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
                var $this = $(this);
                var $first = $this.find('option:eq(0)');

                var nextMonth = new Date().getMonth() + 1;
                var currentMonth = new Date().getMonth();

                if (currentMonth == 11) {
                    nextMonth = 0;
                }

                var requiredMonth = ""

                var text = "";

                if (this.value == "3" || this.value == "6") {
                    if (this.value == "3") {
                        requiredMonth = currentMonth + 3;
                    }
                    else {
                        requiredMonth = currentMonth + 6;
                    }
                    if (requiredMonth > 11) {
                        requiredMonth = requiredMonth - 12;
                    }
                    text = months[nextMonth] + "-" + months[requiredMonth];
                }
                else {
                    text = months[nextMonth] + "-" + months[currentMonth];
                }

                $first.removeAttr('hidden');
                $first.html(text);
                $first.prop('selected', true);
            })
        });

        window.onload = function () {
            $('#d').trigger('change');
        }


 <select name="d11" id="d">
        <option hidden>Next 3 months</option>
        <option value="3">Next 3 months</option>
        <option value="6">Next 6 Month</option>
        <option value="12">Next 12 Month</option>
    </select>

如何使用自己的文字更改选择框文字

2 个答案: