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

Question

I have a piece of program which fetches values from database and displays it in a dropdown box depending on the previous dropdown selection.

But instead of displaying/appending the fetched value on a dropdown, i want it to be in a radio button format.

i'm doing it it javacsript. I have tried a couple of codes and searched over the net but still dont get what i want and still struggling. Can anyone please help me find out how to get it displayed on radio buttons instead of drop down? Many thanks in advance for any help. below is what i have.

on my 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 so it displays only related projects
                var customerId = $(this).val();

                // populate new dropdown options for 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 only projects related to this customer or all in blank
                            if (customerId == '' || item.get('customerId') == customerId){
                                dd.append(app.getOptionHtml(
                                        item.get('id'),
                                        item.get('title'), // some title from 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 the dropdown options for projectId
        // TODO: load only the selected value, then fetch all options when the drop-down is 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'), // some title from 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>'
    },

Answer 1

First of all you cannot use same id for multiple elements hence use unique id for select and radio as you are 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 and create new function getRadioOptions as 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 only projects related to this customer or all in blank
            if (customerId == '' || item.get('customerId') == customerId){
                dd.after(app.getRadioOptions(
                        item.get('id'),
                        item.get('title'), // some title from 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);
    },