JQuery: Dynamicznie twórz zaznaczone znaczniki

Question

Używam JQuery do dynamicznego (na podstawie wyboru użytkownika) create tag. Użytkownik wchodzi wymaga opcji w polu tekstowym, a mój kod tworzy znacznik wyboru. Script jest:

var numbersString = "1,2,3,4,5,6"; 
var data = numbersString.split(','); 

var s = $("<select id=\"selectId\" name=\"selectName\" />"); 
for(var val in data) { 
    $("<option />", {value: val, text: data[val]}).appendTo(s); 
} 
s.appendTo("#msj_form"); 

gdzie msj_form jest moim div id gdzie znacznik dopisuje. Teraz tworzy:

<select id="selectId" anme="selectName"> 
    <option value="0">1</option> 
    <option value="1">2</option> 
    <option value="2">3</option> 
    <option value="3">4</option> 
    <option value="4">5</option> 
    <option value="5">6</option> 
</select> 

Ale chcę też concatinate etykiety i kodu <tr><td> wraz ze znacznikiem taki, że kod będzie wyglądać następująco:

<tr> 
    <td>My Label</td> 
    <td> 
     <select id="selectId" anme="selectName"> 
      <option value="0">1</option> 
      <option value="1">2</option> 
      <option value="2">3</option> 
      <option value="3">4</option> 
      <option value="4">5</option> 
      <option value="5">6</option> 
     </select> 
    </td> 
</tr> 

Answer 1

<!-- Create Dropdown --> 
/* 1- First get total numbers of SELECT tags used in your page to avoid elements name/id issues. 
* 2- Get all OPTIONS user entered with comma separator into a text box. 
* 3- Split user OPTIONS and make an array of these OPTIONS. 
* 4- Create SELECT code. 
* 5- Appent it into the temp div (a hidden div in your page). 
* 6- Then get that code. 
* 7- Now append code to your actual div. 
* 8- Filnally make empty the temp div therfore it will be like a new container for next SELECT tag. 
*/ 

total = $("select").size() + 1;           // 1- 
var myoptions = $("#myoptions").val();         // 2- 
var data = myoptions.split(',');          // 3- 
var s = $("<select id=\""+total+"\" name=\""+total+"\" />");   // 4- 
for(var val in data) { 
    $("<option />", {value: val, text: data[val]}).appendTo(s); 
} 
s.appendTo("#tempselect");            // 5- 
var getselectcode = $("#tempselect").html();       // 6- 
$("#msj_form").append(appendLabel+"<td>"+getselectcode+"</td></tr>"); // 7- 
$("#tempselect").html('');            // 8- 

<div style="display:none;" id="tempselect"></div>      // Temp div 

Answer 2

var s = $("<select id=\"selectId\" name=\"selectName\" />"); 
for(var val in data) { 
    $("<option />", {value: val, text: data[val]}).appendTo(s); 
} 

po pętli for, zawiń całą zawartość w TableRow i komórki w ten sposób, Jquery Wrap()

$(s).wrap('<table><tr><td></td></tr></table>'); 

Answer 3

var html = '<tr><td><label for="select" style="text-transform: none;">Label_name</label></td>' 
      +'<td><select name="select" id="">' 
      +'<option>Choose number..</option>' 
      +'<option value="0">1</option>' 
      +'<option value="1>2</option>' 
      +'<option value="2">3</option>' 
      +'</select></td></tr>'; 

Załóżmy, id tabeli = table_id

$('#table_id').append(html); 
$('#table_id').trigger('create'); 

co dostaję to, że jeśli nie nazywają spust(), projekt swoimi wybranymi wygląd całkowicie pomieszane ..

Answer 4

Niewielka poprawka do odpowiedzi Raviego - dołączanie każdego elementu jeden po drugim jest zaskakująco dużym kosztem operacji.

var s = $("<select id=\"selectId\" name=\"selectName\" />"); 
var opts = []; 
for(var val in data) { 
    opts.push($("<option />", {value: val, text: data[val]})); 
} 

opts.appendTo(s);