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

我不知道应该出什么问题。我复制了你的例子并添加了调用以设置multiple属性，它似乎有效。

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

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

1 个答案: