我们如何在javascript函数表中给出select选项

Question

我使用javascript函数创建了一个表，如下所示。

当我点击make_function_input_range(0, 10, [](int i)->int {...});时，javascript函数会被激活，并会创建一系列文本框。 代码是

Add Row

我可以轻松创建function addRow() { var table = document.getElementById('my_table'); //html table var rowCount = table.rows.length; //no. of rows in table var columnCount = table.rows[0].cells.length; //no. of columns in table var row = table.insertRow(rowCount); //insert a row var cell1 = row.insertCell(0); //create a new cell var element1 = document.createElement("input"); //create a new element element1.type = "checkbox"; //set the element type element1.setAttribute('id', 'newCheckbox'); //set the id attribute element1.setAttribute('checked',true); //set checkbox by default checked cell1.appendChild(element1); //append element to cell var cell2 = row.insertCell(1); var element2 = document.createElement("input"); element2.type = "text"; element2.setAttribute('id', 'newInput'); //set the id attribute element2.setAttribute('name', 'sl'+rowCount); element2.setAttribute('style', 'width: 50px'); cell2.appendChild(element2); var cell3 = row.insertCell(2); var element3 = document.createElement("input"); element3.type = "textarea"; element3.setAttribute('rows', '4'); element3.setAttribute('cols','40'); element3.setAttribute('id', 'newInput'); //set the id attribute element3.setAttribute('name', 'discription'+rowCount); cell3.appendChild(element3); var cell4 = row.insertCell(3); var element4 = document.createElement("input"); element4.type = "text"; element4.setAttribute('id', 'newInput'); //set the id attribute element4.setAttribute('name', 'quantity'+rowCount); cell4.appendChild(element4); var cell5 = row.insertCell(4); var element5 = document.createElement("input"); element5.type = "text"; element5.setAttribute('id', 'newInput'); //set the id attribute element5.setAttribute('name', 'price'+rowCount); cell5.appendChild(element5); var cell6 = row.insertCell(5); var element6 = document.createElement("input"); element6.type = "text"; element6.setAttribute('id', 'newInput'); //set the id attribute element6.setAttribute('name', 'CST'+rowCount); element6.setAttribute('style', 'width: 50px'); cell6.appendChild(element6); var cell7 = row.insertCell(6); //create a new cell var element7 = document.createElement('option'); //create a new element element7.setAttribute('id', 'vat5'); //set the id attribute element7.setAttribute('name','tax'+rowCount); element7.setAttribute('value','vat5'); cell7.appendChild(element7); } ，但我无法在TextBox内获得select(option)个标记。所以我需要知道如何创建VAT5.5，以便在点击select tag时，应在Add Row中使用TextBoxes和select tag创建一行。任何帮助将不胜感激

Answer 1

您想要将select标记添加到某个option，但无法创建select标记。

所以请使用下面的代码来做到这一点..

<div id="addHere"></div>
<script>
    var select=document.createElement("select");
    var op1=document.createElement("option");
    op1.value=1;
    op1.innerHTML="Option 1";

    select.appendChild(op1);

    addHere=document.getElementById("addHere");
    addHere.appendChild(select);
</script>

快乐编码!!!

Answer 2

在您的代码中，您需要创建并附加select标记。 option标记是select.so的子元素，而不是创建选项，首先创建一个选择，然后向其添加选项并选择所需的选项。 选择标签创建应该看起来像这样：

var element7 =  document.createElement("select");
  var optarr =  ['vat1','vat2','vat3','vat4','vat5','vat6'];
  for(var i = 0;i<optarr.length;i++)
  { 
   var opt = document.createElement("option");
   opt.text = optarr[i];
   opt.value = optarr[i];
   opt.className = optarr[i];
   element7.appendChild(opt);
 } 
 element7.setAttribute('id', 'vat5'); //set the id attribute 
 element7.setAttribute('name','tax'+rowCount);
 element7.setAttribute('value','vat5');
 cell7.appendChild(element7);

编辑：启用多重选择

如果您需要选择多个选项，可以在select标签上使用multiple属性，如下所示：

var element7 =  document.createElement("select");
element7.setAttribute("multiple","");

然而通过这样做不再有下拉列表，select元素变成一个列表框，您可以从中选择多个选项。为了实现下拉多选选项，您需要自己编写或使用其中一个可用的javascript或jquery插件如下：

JQuery Multi Select

Vue Select

ParamQuery Select

以及更多搜索