Javascript动态添加多个下拉列表

Question

我想实现一个动态表单，当通过javascript按下按钮时会生成该表单。现在只有文本框正在工作。

这是html中的下拉列表，我希望使用按钮

动态地在js中实现

<form>
<select id="height">
<option value="Math.min(Math.max((2/-900*supposearea + 11.7222222222222),9.5),11.5)">method 1</option>
<option value="Math.min(Math.max((2/-900*supposearea + 10.2222222222222),8),10)">method 2</option>
</select>
</form>

以下是js

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

现在我想将下拉列表添加到

下面的添加按钮代码中

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

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

我尝试了很多方法，但所有这些方法似乎都不起作用。 非常感谢那些可以提供帮助的人：）

Answer 1

我不理解你的下拉问题和你考虑的逻辑。但是我在下面的示例中创建了这个示例，它创建了动态select标记，添加了它的选项并计算了一个取决于其值的值

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

您也可以使用官方的Function构造函数。你的代码就像

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);"
    }
  ];

和用法

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

完整代码

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

<强>更新

我认为这是你的答案

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

希望这会对你有所帮助。