How to keep drop down menu variable by function

Question

i have a function with 3 cases depending on the date. Now i want to display it in a drop down menu.

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;
}

I do not know how to call the function in an Option tag. Please note that the function is not complete displayed.

 <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>

$('#run1').text(get_data_date(0)),$('#run2').text(get_data_date(1)), $('#run3').text(get_data_date(2)).. if you use Jquery — Benil Mathew, Oct 14 '15 at 13:10
see [how-to-execute-a-javascript-function-when-i-have-its-name-as-a-string](http://stackoverflow.com/questions/359788/how-to-execute-a-javascript-function-when-i-have-its-name-as-a-string) --> you'll want to move the arguments portion out of the option text — WhiteHat, Oct 14 '15 at 13:22

score 0 · Answer 1 · answered Oct 14 '15 at 14:44

Don't use eval, as it offers too many opportunities for Bad Things.

Instead, inspect the selected option and invoke the appropriate function. With the markup as you've presented it, it would look something like this

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

However, if you have control of your markup, you should consider refactoring to put the value you care about in the value attribute of your options. Then, you can directly access that value and pass it as an argument to your function.

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

How to keep drop down menu variable by function

1 Answers1