保留選擇多個值並使用它們來創建表jQuery

Question

我想知道如何保持多選的不同值，然後從jQuery創建一個數組。

讓我解釋一下，

我多選我有5個值：

<select name="animal" id="animal" multiple="multiple"> 
       
<option> value="30"> Cat </ option> 
<option> value="31"> Dog </ option> 
<option> value="32"> Bird </ option> 
<option> value="33"> Cow </ option> 
<option> value="34"> Fox </ option> 

</ select> 

我選擇示例值：30，32，34

，當我點擊我的「節目「按鈕，我想要它創建一個如下所示的表格：

<table> 
     <thead> 
      <tr> 
      <th> 
       Animal 
      </ th> 
      <th> 
       Cat 
      </ th> 
      <th> 
       Bird 
      </ th> 
      <th> 
       Fox 
      </ th> 
     </ tr> 
     </ thead> 
     <tbody> 
     </ tbody> 
    </ table> 

如何使用jQuery 請 ？

我希望我已經解釋了我的問題。

謝謝你未來的答案。

Answer 1

首先使select有效的標記。 option標籤過早關閉，導致屬性不成爲標籤的一部分。

<select name="animal" id="animal" multiple="multiple"> 
<option value="30"> Cat </option> 
<option value="31"> Dog </option> 
<option value="32"> Bird </option> 
<option value="33"> Cow </option> 
<option value="34"> Fox </option> 
</select> 

還要添加按鈕和表您的標記：

<button>Show Table</button> 
<table> 
    <thead> 
     <tr> 
     </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table> 

然後使用以下的Javascript/jQuery的：

$("button").click(function(){ 
    var html; 
    $("#animal option:selected").each(function(){ 
     html += "<th>" + this.text + "</th>"; 
    }); 
    $("table thead tr").append(html); 
}); 

JS小提琴：http://jsfiddle.net/233b3/

如果您必須在此處動態生成整個表格是另一個Fiddle。