如何在laravel刀片中提交表单后的年，月保留值

Question

我有一个表单，我在其中使用从 javascript 获取数据的年月下拉菜单。代码如下：

  <form id="commissionReportPanel" method="POST" action="{{route('commission-data')}}" >
            <input type="hidden" name="_token" value="{{ csrf_token() }}" />
        <div class="row">
          <div class="col-md-3">
            <label class="col-form-label header-style">Select Month</label>
            <div class="input-group">
               <select class="dob input-sm" id="year" name="year"></select>
                  &nbsp;   &nbsp;
<select class="dob input-sm" id="month" name="month"></select>
                  
              </div>
           
          </div>
          
       
           <div class="col-md-3" style="margin-top: 23px;">
           <button class="btn btn-primary" type="submit" id="search" onclick="return check_year()">Submit</button>
          </div>
          
        </div>
        
  
          </form> 

脚本

     const monthNames = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];
  var qntYears = 20;
  var selectYear = $("#year");
  var selectMonth = $("#month");
  var selectDay = $("#day");
  var currentYear = new Date().getFullYear();
  
  for (var y = 0; y < qntYears; y++){
    let date = new Date(currentYear);
    var yearElem = document.createElement("option");
    yearElem.value = currentYear 
    yearElem.textContent = currentYear;
    selectYear.append(yearElem);
    currentYear--;
  } 

  for (var m = 0; m <12; m++){
      
      let monthNum = new Date(2018, m).getMonth();
      let month = monthNames[monthNum];
      var monthElem = document.createElement("option");
      monthElem.value = monthNum; 
      monthElem.textContent = month;
      selectMonth.append(monthElem);
    }

提交表单后，我已将用户选择的年份和月份从控制器返回到刀片。但我无法在上面的脚本中设置该值。我尝试了许多方法来保留数据，例如->withinput，在表单提交后将值设置为下拉 ID，但由于默认下拉值因更改而受到影响，因此没有任何工作正常。

在上述代码中提交表单后，我应该如何在下拉列表中设置旧/用户选择的值？请帮助和指导。提前致谢

Answer 1

您可以在选择上设置data-value 属性和提交/持久值，然后在创建选项时检查该值并在匹配时设置selected 属性。

在此示例中，我将 data-values 设置为 2013 和 2(March)

const monthNames = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];
var qntYears = 20;
var selectYear = $("#year");
var selectMonth = $("#month");
var selectDay = $("#day");
var currentYear = new Date().getFullYear();

for (var y = 0; y < qntYears; y++) {
  let date = new Date(currentYear);
  var yearElem = document.createElement("option");
  yearElem.value = currentYear
  yearElem.textContent = currentYear;
  if (selectYear.data('value') == yearElem.value) {
    yearElem.selected = true;
    //console.log(yearElem);
  }
  selectYear.append(yearElem);
  currentYear--;
}

for (var m = 0; m < 12; m++) {

  let monthNum = new Date(2018, m).getMonth();
  let month = monthNames[monthNum];
  var monthElem = document.createElement("option");
  monthElem.value = monthNum;
  monthElem.textContent = month;
  if (selectMonth.data('value') == monthElem.value) {
    monthElem.selected = true;
  }
  selectMonth.append(monthElem);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="commissionReportPanel" method="POST" action="{{route('commission-data')}}">
  <input type="hidden" name="_token" value="{{ csrf_token() }}" />
  <div class="row">
    <div class="col-md-3">
      <label class="col-form-label header-style">Select Month</label>
      <div class="input-group">
        <select class="dob input-sm" id="year" name="year" data-value="2013"></select>
        &nbsp; &nbsp;
        <select class="dob input-sm" id="month" name="month" data-value="2"></select>

      </div>

    </div>


    <div class="col-md-3" style="margin-top: 23px;">
      <button class="btn btn-primary" type="submit" id="search" onclick="return check_year()">Submit</button>
    </div>

  </div>


</form>