Question

根据日期，我有3种情况的功能。现在我想在下拉菜单中显示它。

function get_data_date(i) {
var string;
if (i == 0) {
  if(d.getUTCHours() < 3 ) {
   .
   .
   .
   .
   .
              string=d_date.getUTCFullYear()+""+addZero1(d_date.getUTCMonth()+1)+""+d_date.getUTCDate()+"_"+addZero1(d_date.getUTCHours());

return string;
}

我不知道如何在Option标签中调用该函数。请注意，该功能未完整显示。

 <form action="select.htm">

    <select name="run" size="1">
    <option id="run1" > get_data_date(0)</option>
    <option id="run2" > get_data_date(1) </option>
    <option id="run3" > get_data_date(2)</option>
    </select>
</form>

Answer 1

请勿使用eval，因为它为Bad Things提供了太多机会。

相反，检查选定的option并调用相应的函数。随着你提出的标记，它看起来像这样

// Ignore this, it's just here for an example
var doLog = (function() {
  var logOutput = document.createElement('pre');
  document.body.appendChild(logOutput);
  return function doLog(msg) {
    var t = document.createTextNode(msg + "\n");
    logOutput.appendChild(t);
  };
})();

function get_data_date(i) {
  doLog('You selected ' + i);
}

function selectChangeHandler(ev) {
  var e = ev.target;
  var id = e.options[e.selectedIndex].id;

  // Invoke `get_data_date` with appropriate argument, based on
  // the selected option. NOTE: This is not a good solution--see below for
  // a better one
  if (id === 'run1') {
    get_data_date(0);
  } else if (id === 'run2') {
    get_data_date(1);
  } else if (id === 'run3') {
    get_data_date(2);
  }

}

var selectControl = document.querySelector('select[name="run"]');

selectControl.addEventListener('change', selectChangeHandler);

<form action="select.htm">
  <select name="run" size="1">
    <option id="run1" > get_data_date(0)</option>
    <option id="run2" > get_data_date(1) </option>
    <option id="run3" > get_data_date(2)</option>
  </select>
</form>

但是，如果您控制了标记，则应考虑重构以将您关注的值放在value的{{1}}属性中。然后，您可以直接访问该值并将其作为参数传递给您的函数。

option

// Ignore this, it's just here for an example
var doLog = (function() {
  var logOutput = document.createElement('pre');
  document.body.appendChild(logOutput);
  return function doLog(msg) {
    var t = document.createTextNode(msg + "\n");
    logOutput.appendChild(t);
  };
})();

function get_data_date(i) {
  doLog('You selected ' + i);
}

function selectChangeHandler(ev) {
  var e = ev.target;
  // TODO: Error handling
  var val = e.options[e.selectedIndex].value;
  get_data_date(val);
}

var selectControl = document.getElementById('date-run-select');

selectControl.addEventListener('change', selectChangeHandler);

如何按功能保持下拉菜单变量

1 个答案: