JQuery: crear dinámicamente Tag select

Question

Estoy usando JQuery para crear dinámicamente (según la elección del usuario) la etiqueta. El usuario ingresa las opciones requeridas en un cuadro de texto y mi código crea una etiqueta de selección. Script es:

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

donde msj_form es mi div id donde la etiqueta anexa. En este momento se crea:

<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> 

pero también quiero a contatenar una Etiqueta y <tr><td> código junto con la etiqueta de tal manera que el código se verá así:

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

después del bucle for, ajuste todo el contenido con TableRow y celdas como esta, 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>'; 

Supongamos, el id de la tabla = identificador de tabla

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

lo que me pasa es que, si usted no llama gatillo(), el diseño de sus selectos miradas completamente en mal estado.

Answer 4

Ligera enmienda a la respuesta de Ravi: agregar cada elemento de uno en uno es una operación sorprendentemente costosa.

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