将三个HTML select元素作为一个发送到JSON

Question

所有！我的代码中有以下代码段。我正在尝试console.log显示{"selectDays":"13","selectMonths":"8","selectYear":"2018"}as JSON格式，但只有1个字符串，例如：格式为“yyyy-mm-dd”的{"dateTimeString:2018/08/13"}这是可能的，有人可以帮助我吗？

$(document).ready(function() {
const monthNames = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];
  var qntYears = 4;
  var selectYear = $("#selectYears");
  var selectMonth = $("#selectMonths");
  var selectDay = $("#selectDays");
  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+1; 
      monthElem.textContent = month;
      selectMonth.append(monthElem);
    }

    var d = new Date();
    var month = d.getMonth()+1;
    var year = d.getFullYear();
    var day = d.getDate();

    selectYear.val(year); 
    selectYear.bind("change", AdjustDays);  
    selectMonth.val(month);    
    selectMonth.bind("change", AdjustDays);

    AdjustDays();
    selectDay.val(day);
    
    function AdjustDays(){
      var year = selectYear.val();
      var month = parseInt(selectMonth.val());
      selectDay.empty();
      
      //get the last day, so the number of days in that month
      var days = new Date(year, month, 0).getDate(); 
      
      //lets create the days of that month
      for (var d = 1; d <= days; d++){
        var dayElem = document.createElement("option");
        dayElem.value = d; 
        dayElem.textContent = d;
        selectDay.append(dayElem);
      }
    }    

   var dateTimeString = year + '/' + month +'/' + day;
   console.log(dateTimeString);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectDays" name="selectDays"></select>     

<select id="selectMonths" name="selectMonths"></select>

<select  id="selectYears" class="input-year" name="selectYear"></select>

Answer 1

你需要将它们包装在一个表单中，然后在表单上添加一个submit事件监听器，它将取消默认操作并手动拨打你的电话：

<form id="myForm">
  <select id="selectDays" ...>
  <select id="selectMonths" ...>
  <select id="selectYears" ...>
  <button>Submit</button>
</form>

和JavaScript：

$('#myForm').on('submit', (e) => {
  e.preventDefault(); // cancel the normal submit
  const data = { 
    selectDays: $('#selectDays').val(),
    selectMonths: $('#selectMonths').val(),
    selectYears: $('#selectYears').val()
  };

  $.ajax('http://example.com/my-url', {
    method: 'post',
    data: JSON.stringify(data),
    contentType: "application/json"
  });
}).done(() => { /* do something when done */ });

这将覆盖默认表单提交操作，而是收集数据并将其作为单个JSON对象发送到您的调用中。

如果您需要调整要发送的值，只需根据需要在构造的data对象中调整它们。