Javascript dynamic adding mutiple drop down list

Question

i want to achieve a dynamic form that will be generated when the button is pressed through javascript. right now only the textbox is working.

this is the drop down l

Answer 1

I did not understand your problem with that drop down and your considered logic for it. But I create this below example, which create dynamic select tag, add its options and also calculate a value depend to its value

function createSelect() {
  var select = document.createElement("select");
  select.id = "height";
  var array = [{
      title: "method 1",
      value: "f1"
    },
    {
      title: "method 2",
      value: "f2"
    }
  ];

  document.getElementById("wrapper").appendChild(select);

  //Create and append the options
  for (var i = 0; i < array.length; i++) {
    var option = document.createElement("option");
    option.value = array[i].value;
    option.text = array[i].title;
    select.appendChild(option);
  }
}

function add_field() {
  var total_text = document.getElementsByClassName("input_text");
  total_text = total_text.length + 1;
  var p = document.createElement("p");
  p.setAttribute("id", "input_text" + total_text + "_wrapper");
  var input1 = document.createElement("input");
  input1.setAttribute("type", "text");
  input1.setAttribute("class", "input_text");
  input1.setAttribute("id", "length" + total_text);
  p.appendChild(input1);

  var input2 = document.createElement("input");
  input2.setAttribute("type", "text");
  input2.setAttribute("class", "input_text");
  input2.setAttribute("id", "length" + total_text);
  p.appendChild(input2);

  var btn = document.createElement("input");
  btn.setAttribute("type", "button");
  btn.setAttribute("value", "Remove");
  btn.setAttribute("onclick", 'remove_field("input_text' + total_text + '")');
  p.appendChild(btn);

  document.getElementById("field_div").appendChild(p);
}

function remove_field(id) {
  document.getElementById(id + "_wrapper").innerHTML = "";
}

function f1(supposearea) {
  return Math.min(
    Math.max(2 / -900 * supposearea + 11.7222222222222, 9.5),
    11.5
  );
}

function f2(supposearea) {
  return Math.min(Math.max(2 / -900 * supposearea + 10.2222222222222, 8), 10);
}

function calculate() {
  var answer = 0;
  document.getElementById("Result").innerHTML = "";
  var inputs = document.querySelectorAll("input[type=text]");
  for (var i = 0; i < inputs.length;) {
    var length = inputs[i].value;
    var width = inputs[i + 1].value;
    var area = length * width;
    i = i + 2;
    document.getElementById("Result").innerHTML +=
      "Answer " + ++answer + ") " + area + "<br>";

    var fId = document.getElementById("height").value;

    if (fId == "f1") {
      console.log(f1(area));
    } else {
      console.log(f2(area));
    }
  }
}

createSelect();

<div id="wrapper">
  <div id="field_div">
    <input type="button" value="Add TextBox" onclick="add_field();">
  </div>
</div>
<p><button type="button" onclick="calculate()">Calculate</button></p>
<p id="Result"></p>

---

Also you can use official Function constructor. Your code will be like

var array = [
    {
      title: "method 1",
      value: "return Math.min( Math.max(2 / -900 * supposearea + 11.7222222222222, 9.5), 11.5 );"
    },
    {
      title: "method 2",
      value: "return Math.min(Math.max(2 / -900 * supposearea + 10.2222222222222, 8), 10);"
    }
  ];

And Usage

var fId = document.getElementById("height").value;
var func = new Function("supposearea", fId);
console.log(func(area));

Full code

function createSelect() {
  var select = document.createElement("select");
  select.id = "height";
  var array = [{
      title: "method 1",
      value: "return Math.min( Math.max(2 / -900 * supposearea + 11.7222222222222, 9.5), 11.5 );"
    },
    {
      title: "method 2",
      value: "return Math.min(Math.max(2 / -900 * supposearea + 10.2222222222222, 8), 10);"
    }
  ];

  document.getElementById("wrapper").appendChild(select);

  //Create and append the options
  for (var i = 0; i < array.length; i++) {
    var option = document.createElement("option");
    option.value = array[i].value;
    option.text = array[i].title;
    select.appendChild(option);
  }
}

function add_field() {
  var total_text = document.getElementsByClassName("input_text");
  total_text = total_text.length + 1;
  var p = document.createElement("p");
  p.setAttribute("id", "input_text" + total_text + "_wrapper");
  var input1 = document.createElement("input");
  input1.setAttribute("type", "text");
  input1.setAttribute("class", "input_text");
  input1.setAttribute("id", "length" + total_text);
  p.appendChild(input1);

  var input2 = document.createElement("input");
  input2.setAttribute("type", "text");
  input2.setAttribute("class", "input_text");
  input2.setAttribute("id", "length" + total_text);
  p.appendChild(input2);

  var btn = document.createElement("input");
  btn.setAttribute("type", "button");
  btn.setAttribute("value", "Remove");
  btn.setAttribute("onclick", 'remove_field("input_text' + total_text + '")');
  p.appendChild(btn);

  document.getElementById("field_div").appendChild(p);
}

function remove_field(id) {
  document.getElementById(id + "_wrapper").innerHTML = "";
}

function calculate() {
  var answer = 0;
  document.getElementById("Result").innerHTML = "";
  var inputs = document.querySelectorAll("input[type=text]");
  for (var i = 0; i < inputs.length;) {
    var length = inputs[i].value;
    var width = inputs[i + 1].value;
    var area = length * width;
    i = i + 2;
    document.getElementById("Result").innerHTML +=
      "Answer " + ++answer + ") " + area + "<br>";

    var fId = document.getElementById("height").value;
    var func = new Function("supposearea", fId);
    console.log(func(area));
  }
}

createSelect();

<div id="wrapper">
  <div id="field_div">
    <input type="button" value="Add TextBox" onclick="add_field();">
  </div>
</div>
<p><button type="button" onclick="calculate()">Calculate</button></p>
<p id="Result"></p>

---

Update

I think this is your answer

var rowNumber = 0;

function createSelect(tag) {
  var select = document.createElement("select");
  select.id = "select-" + rowNumber;
  var array = [{
      title: "10 Grass",
      value: "return 1;"
    },
    {
      title: "20 Grass",
      value: "return 2;"
    },
    {
      title: "30 Grass",
      value: "return 3;"
    },
    {
      title: "40 Grass",
      value: "return 4;"
    },

    {
      title: "1",
      value: "return Math.min( Math.max(1212 / -243 * supposearea + 11.7222222222222, 9.5), 11.5 );"
    },
    {
      title: "2",
      value: "return Math.min(Math.max(23 / 100 * supposearea + 10.2222222222222, 8), 10);"
    },
    {
      title: "3",
      value: "return Math.min( Math.max(342 / 50 * supposearea + 11.7222222222222, 9.5), 11.5 );"
    },
    {
      title: "4",
      value: "Math.min(Math.max((244/232134*supposearea + 13.7222222222222),11.5),13.5);"
    }
  ];

  tag.appendChild(select);

  //Create and append the options
  for (var i = 0; i < array.length; i++) {
    var option = document.createElement("option");
    option.value = array[i].value;
    option.text = array[i].title;
    select.appendChild(option);
  }
}


function createSelect1(tag) {
  var select = document.createElement("select");
  select.id = "select-" + rowNumber;
  var array = [{
      title: "Original",
      value: "0.65"
    },
    {
      title: "10%",
      value: "1"
    }
  ];

  tag.appendChild(select);

  //Create and append the options
  for (var i = 0; i < array.length; i++) {
    var option = document.createElement("option");
    option.value = array[i].value;
    option.text = array[i].title;
    select.appendChild(option);
  }
}




function add_field() {
  var p = document.createElement("p");
  p.setAttribute("id", "input_text" + rowNumber + "_wrapper");
  var input1 = document.createElement("input");
  input1.setAttribute("type", "text");
  input1.setAttribute("class", "input_text");
  input1.setAttribute("id", "inp1-" + rowNumber);
  p.appendChild(input1);

  var input2 = document.createElement("input");
  input2.setAttribute("type", "text");
  input2.setAttribute("class", "input_text");
  input2.setAttribute("id", "inp2-" + rowNumber);
  p.appendChild(input2);



  createSelect(p);
  createSelect1(p);

  var btn = document.createElement("input");
  btn.setAttribute("type", "button");
  btn.setAttribute("value", "Remove");
  btn.setAttribute("onclick", 'remove_field("input_text' + rowNumber + '_wrapper")');
  p.appendChild(btn);

  document.getElementById("field_div").appendChild(p);
  rowNumber++;
}

function remove_field(id) {
  document.getElementById(id).innerHTML = "";
  calculate();
}

function calculate() {
  var answer = 0;
  document.getElementById("Result").innerHTML = "";
  var ps = document.getElementById('field_div').getElementsByTagName('p');
  for (var i = 0; i < ps.length; i++) {
    if (ps[i].childNodes.length == 0) continue;
    var length = ps[i].childNodes[0].value;
    var width = ps[i].childNodes[1].value;
    var area = length * width;
    var fId = ps[i].childNodes[2].value;
    var func = new Function("supposearea", fId);
    var discount = ps[i].childNodes[3].value;
    var amount = area * (func(area));
    document.getElementById("Result").innerHTML +=
      "Answer " + ++answer + ") " + area + " ----" + func(area) + '<br>' + amount / discount + "<br>";
  }
}

<div id="wrapper">
  <div id="field_div">
    <input type="button" value="Grass" onclick="add_field();">
  </div>
</div>
<p><button type="button" onclick="calculate()">Calculate</button></p>
<p id="Result"></p>

Hope this helps you.