Question

I have a select box created by jquery whose class is ‘classTypex’.

I want to show/hide its child elements using this function, but its not working for hiding the elements..

As per below code, i am appending a textarea and 3 radio buttons.. using the code in else part i am able to hide textaraea but not radio buttons.. Pls help

// To display radio button selections for DD typex
$(".classTypex").live("change", function () {
   var id = $(this).attr("id").split("colTypex").join(""); 
   var opt = $("#colTypex" + id + " option:selected").val(); 

   if(opt == 'DD') {

       // append a text area for none selection
       $(this).after('<p>');
       $(this).after('<textarea name="ddOptions'+id+'" id="ddOptions'+id+'" rows="4" cols="40">');
       $(this).after('</p>');

       // append radio buttons here
       $(this).after('<p id="preTag'+id+'">');
       $(this).after('Set Users as options');
       $(this).after('<input type="radio" class="columnTypex" id="radioDD'+id+'" name="radioDD'+id+'" value="befree_user" />');
       $(this).after('Set Entities as options');
       $(this).after('<input type="radio" class="columnTypex" id="radioDD'+id+'" name="radioDD'+id+'" value="entity_data" />');
       $(this).after('None');
       $(this).after('<input type="radio" class="columnTypex" id="radioDD'+id+'" name="radioDD'+id+'" value="none" checked />');
       $(this).after('</p>');

   }
   else {
       $('#ddOptions'+id).hide();
       $('#preTag'+id).hide();
   }

});

Answer 1

Your code doesn’t work, because each(!) call to .after() will create a complete tag, so the first <p> will be created together with its closing tag, even before you call .after('</p>').

You should first create the full HTML string and then append it.

var newHTML = '<p><textarea name="ddOptions'+id+'" id="ddOptions'+id+'" rows="4" cols="40"></p>';
$(this).after(newHTML);