javascript関数で作成されたドロップダウンに複数の選択オプションを与える方法

Question

私は、行が動的に追加されるjavascript関数を持っています。最後の「CELL7」私は、ドロップダウンオプションと一緒に持って

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

、私が選択する複数のオプションを必要とする唯一のoption.Butを選択しています。例えば：vat1とvat3を一度、vat3とvat5とvat2を一度これらのように。私はelement7.setAttribute("multiple","")を試しました。しかし、それは私が "jquery Multiselect"を試してみましたが、私はそれを必要としないリストになっていますが、私は本当にjqueryとajaxについて多くのことを知っていないので、この1つのヘルプは本当に感謝されます。

編集："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); 

あなたがあなた自身のコードにタイプミスをした場合、おそらく何らかの形でここに掲載例にそれをしなかったことを、確認してください。

EDIT：複数選択のデフォルトHTML表現が醜いと感じます。私は同意しないとは言えません。つまり、これはスタンドアートのHTMLであり、PC、Mac、iPad、Android Phoneなどで表示すると表現が変わるという。

CSSフレームワークを使用して視覚的に「アップグレード」するのが好きなようです。そこには多くの人がいます。私は、最も人気のあるものの2に名前を付けることができます。

Bootstrapと Foundation