JQuery: गतिशील रूप से चुनें टैग

Question

मैं JQuery का उपयोग गतिशील रूप से (उपयोगकर्ता पसंद के आधार पर) टैग बनाने के लिए कर रहा हूं। उपयोगकर्ता प्रविष्टियों को टेक्स्ट बॉक्स में विकल्पों की आवश्यकता होती है और मेरा कोड इसका चयन टैग बनाता है। स्क्रिप्ट है:

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

जहां msj_form मेरी div id है जहां टैग जोड़ देता है। अभी यह बनाता है:

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

लेकिन मैं यह भी टैग के साथ एक लेबल और <tr><td> कोड concatinate करना चाहते इस तरह के कोड की तरह दिखाई देगा कि:

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

लूप के बाद

, इस सामग्री को टेबलरो और सेल के साथ लपेटें, 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>'; 

मान लें चलो, तालिका के आईडी = table_id

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

मैं क्या मिलता है, यदि आप ट्रिगर(), अपने चयन दिखता के डिजाइन कॉल नहीं करते पूरी तरह से गड़बड़ ..

Answer 4

रवि द्वारा उत्तर में थोड़ा संशोधन - प्रत्येक तत्व को एक-एक करके जोड़ना आश्चर्यजनक रूप से उच्च लागत वाला ऑपरेशन है।

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