Javascript动态添加多个下拉列表 [英] Javascript dynamic adding mutiple drop down list

查看：81
本文介绍了Javascript动态添加多个下拉列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

这是html中的下拉列表，我想在js中使用按钮实现动态使用。

 <形式> 
< select id =height> 
 <选项值=Math.min（Math.max（（2 / -900 * supposearea + 11.7222222222222），9.5），11.5）>方法1< / option> 
< option value =Math.min（Math.max（（2 / -900 * supposearea + 10.2222222222222），8），10）>方法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（输入1）; var input2 = document.createElement（'input'）; input2.setAttribute（'type'，'text'）; input2.setAttribute（'class'，'input_text'）; input2.setAttribute（'id'，'length'+ total_text）; p.appendChild（输入2）; 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 =buttonvalue =Add TextBoxonclick =add_field（）;>< / div>< / div>< p>< button type =buttononclick =calculate （< / p>< div>



我尝试了很多方法，但所有这些方法似乎都不起作用。
真的很感谢那些能够帮助的人：）

解决方案

我不理解你的问题，认为它的逻辑。但是我创建了下面这个例子，它创建了动态 select 标签，添加了它的选项并且还计算了一个值取决于它的值

< pre class =snippet-code-js lang-js prettyprint-override> function createSelect（）{var select = document.createElement（select）; select.id =height; var array = [{title：method 1，value：f1}，{title：method 2，value：f2}];的document.getElementById（ 包装）的appendChild（选择）。 //创建并追加选项（var i = 0; i< array.length; i ++）{var option = document.createElement（option）; option.value = array [i] .value; option.text = array [i] .title; select.appendChild（可选）; }} 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（输入1）; var input2 = document.createElement（input）; input2.setAttribute（type，text）; input2.setAttribute（class，input_text）; input2.setAttribute（id，length+ total_text）; p.appendChild（输入2）; 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）;}函数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 = 包装 > < div id =field_div> < input type =buttonvalue =Add TextBoxonclick =add_field（）;> < / div>< p><按钮类型=按钮onclick =calculate（）>计算< /按钮>< / p>< p id ="结果>> ;< / p>



$ hr

你也可以使用官方的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））;

完整代码 

  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（ 包装）的appendChild（选择）。 //创建并追加选项（var i = 0; i< array.length; i ++）{var option = document.createElement（option）; option.value = array [i] .value; option.text = array [i] .title; select.appendChild（可选）; }} 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（输入1）; var input2 = document.createElement（input）; input2.setAttribute（type，text）; input2.setAttribute（class，input_text）; input2.setAttribute（id，length+ total_text）; p.appendChild（输入2）; 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（面积））; }} createSelect（）;

< div id =包装> < div id =field_div> < input type =buttonvalue =Add TextBoxonclick =add_field（）;> < / div>< p><按钮类型=按钮onclick =calculate（）>计算< /按钮>< / p>< p id ="结果>> ;< / p>



$ hr

更新



我认为这是您的答案 class =snippetdata-lang =jsdata-hide =falsedata-console =truedata-babel =false> 

  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草，值：返回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（选择）; //创建并追加选项（var i = 0; i< array.length; i ++）{var option = document.createElement（option）; option.value = array [i] .value; option.text = array [i] .title; select.appendChild（可选）; }} 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（选择）; //创建并追加选项（var i = 0; i< array.length; i ++）{var option = document.createElement（option）; option.value = array [i] .value; option.text = array [i] .title; select.appendChild（可选）; }} 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（输入1）; var input2 = document.createElement（input）; input2.setAttribute（type，text）; input2.setAttribute（class，input_text）; input2.setAttribute（id，inp2-+ rowNumber）; p.appendChild（输入2）; 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））; （+）+ + +++++ + + + + + + + + + + + + + + + + + + + <峰; br>中; }

< div id =wrapper> < div id =field_div> < input type =buttonvalue =Grassonclick =add_field（）;> < / div>< p><按钮类型=按钮onclick =calculate（）>计算< /按钮>< / p>< p id ="结果>> ;< / p>



p>

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 list in html and which i want to achieve in js dynamically using button

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

the below is the js

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

right now i want to put the drop down into the add button code below

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>

i have tried a lot of methods but all of them doesn't seem to work. Really appreciate to those who can help :)

解决方案

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.

这篇关于Javascript动态添加多个下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆