如何按功能保持下拉菜單變量

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 ，因為它為壞事提供了太多的機會。

而是檢查選定的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> 

但是，如果您可以控制標記，則應考慮進行重構，以將您關心的值放入option的value屬性中。 然后，您可以直接訪問該值並將其作為參數傳遞給函數。

 // 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); 

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