javascript - append values to radio button instead of dropdown box after previous dropdown selection -

i have piece of program fetches values database , displays in dropdown box depending on previous dropdown selection.

but instead of displaying/appending fetched value on dropdown, want in radio button format.

i'm doing it javacsript. have tried couple of codes , searched on net still dont want , still struggling. can please me find out how displayed on radio buttons instead of drop down? many in advance help. below have.

on html:

    <div class="modal-body">         <div id="secondmodelalert"></div>         <div id="defaultsmodelcontainer">                <form onsubmit="return false;" class="form-horizontal">         <fieldset>                       <div id="currentprojectidinputcontainer" class="control-group">                 <label class="control-label" for="currentprojectid">project</label>                 <div id="parentprojectid" class="controls inline-inputs">                     <select id="currentprojectid" name="currentprojectid"></select>                     <span class="help-inline"></span>                 </div>             </div>                   </fieldset>         </form> </div>   <script type="text/template" id="timeentrymodeltemplate">         <form class="form-horizontal" onsubmit="return false;">             <fieldset>                               <div id="filtercustomeridteinputcontainer" class="control-group">                     <label class="control-label" for="filtercustomeridte">customer filter</label>                     <div class="controls inline-inputs">                         <select id="filtercustomeridte" name="filtercustomeridte"></select>                         <span class="help-inline"></span>                     </div>                 </div>                 <div id="projectidinputcontainer" class="control-group">                     <label class="control-label" for="projectid">project</label>                     <div id="parentprojectidte" class="controls inline-inputs">                         <<select id="projectid" name="projectid"></select>                          <input type="radio" id="projectid" name="projectid">                         <span class="help-inline"></span>                     </div>                 </div>                           </fieldset>         </form> </script> 

process.js

   // customer changed action         $("#filtercustomeridteinputcontainer input, #filtercustomeridteinputcontainer select").change(function(e) {                 e.preventdefault();                 app.showprogress('modelloader');                  // on customer change update projects combo displays related projects                 var customerid = $(this).val();                  // populate new dropdown options projectid based on customerid                 var projectidvalues = new model.projectcollection();                 projectidvalues.fetch({                     success: function(c){                                                $('#projectid *').remove();                         var dd = $('#projectid');                                                    dd.append('<option value=""></option>');                         c.foreach(function(item,index)                         {                             // add projects related customer or in blank                             if (customerid == '' || item.get('customerid') == customerid){                                 dd.append(app.getoptionhtml(                                         item.get('id'),                                         item.get('title'), // title database                                         false // no defaults                                 ));                              }                                                            });                                              app.hideprogress('modelloader');                         return true;                     },                     error: function(collection,response,scope){                         app.appendalert(app.geterrormessage(response), 'alert-error',0,'modelalert');                         return false;                     }                 });                                  app.hideprogress('modelloader');         });          // populate dropdown options projectid         // todo: load selected value, fetch options when drop-down clicked         if (isexistingrecord)             var projectidvalues = new model.projectcollection();         else             var projectidvalues = new model.projectactiveonlycollection();         projectidvalues.fetch({             success: function(c){                 var dd = $('#projectid');                 dd.append('<option value=""></option>');                 c.foreach(function(item,index)                 {                     dd.append(app.getoptionhtml(                                             item.get('id'),                         item.get('title'), // title database                         page.timeentry.get('projectid') == item.get('id')                     ));                 });                          },             error: function(collection,response,scope){                 app.appendalert(app.geterrormessage(response), 'alert-error',0,'modelalert');             }         }); 

app.js

   getoptionhtml: function(val,label,selected)     {         return '<option value="' + _.escape(val) + '" ' + (selected ? 'selected="selected"' : '') +'>'             + _.escape(label)             + '</option>'     }, 

first of cannot use same id multiple elements hence use unique id select , radio using projectid

<div id="parentprojectidte" class="controls inline-inputs">    <<select id="projectid" name="projectid"></select>    <input type="radio" id="projectradioid" name="projectid">    <span class="help-inline"></span> </div> 

you can make changes in ajax call , create new function getradiooptions shown below -

ajax call change

projectidvalues.fetch({     success: function(c){                                $('#projectid *').remove();         var dd = $('#projectradioid');                                    //dd.append('<option value=""></option>');         c.foreach(function(item,index)         {             // add projects related customer or in blank             if (customerid == '' || item.get('customerid') == customerid){                 dd.after(app.getradiooptions(                         item.get('id'),                         item.get('title'), // title database                         false // no defaults                 ));              }                                            });                              app.hideprogress('modelloader');         return true;     }, 

new getradiooptions functions -

getradiooptions: function(val,label,selected)     {         return '<input type="radio" name="projectid" value="'                 + _.escape(val) + '" >'                + _.escape(label);     },