javascript - 如何为在 javascript 函数中创建的下拉菜单提供多个选择选项

Question

我有一个 JavaScript 函数，可以动态添加行。

<script language="javascript">
   // Add row to the HTML table


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

在最后一个“cell7”中，我有下拉菜单和选项，我只选择一个选项。但我需要选择多个选项。例如:vat1和vat3一次，vat3和vat5和vat2一次这样。我尝试了 element7.setAttribute("multiple","")。但它变成了一个我不需要的列表所以我尝试了“jquery Multiselect”，但它对我来说遥不可及，因为我真的不太了解 jquery 和 ajax。对此的任何帮助都将非常感激。

编辑:使用“setAttribute('multiple','')

后

Answer 1

我不知道出了什么问题。我复制了您的示例并添加了设置多个属性的调用，它似乎有效。

http://plnkr.co/edit/6yAVtHyVwAWBFd3TBTc7?p=preview

var element7 =  document.createElement("select");
element7.setAttribute('multiple', '');
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);
} 

var container = document.getElementById('container');
container.appendChild(element7);

也许检查一下您自己的代码中是否有拼写错误，不知何故，该错误没有出现在此处发布的示例中。

编辑:您觉得多重选择的默认 HTML 表示形式很丑陋。我不能说我不同意。也就是说，这是标准 HTML，当您在 PC、Mac、iPad、Android 手机等设备上看到它时，其表示形式确实会发生变化。

听起来你会通过使用 CSS 框架获得最好的视觉“升级”。那里有很多这样的人。我可以说出两个最受欢迎的:

Bootstrap和 Foundation