Question

我有一个程序从数据库中获取值，并根据之前的下拉选择在下拉框中显示它。

但是，不是在下拉列表中显示/附加获取的值，而是希望它采用单选按钮格式。

我正在做它javacsript。我已经尝试了几个代码并通过网络搜索但仍然没有得到我想要的东西，仍然在努力。任何人都可以帮我找出如何让它显示在单选按钮而不是下拉？非常感谢您的帮助。以下是我所拥有的。

在我的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

首先，您不能对多个元素使用相同的id，因此在使用id select和radio使用唯一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>

您可以在ajax调用中进行更改并创建新函数getRadioOptions，如下所示 -

AJAX呼叫变更

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

新的getRadioOptions函数 -

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

在上一个下拉选择之后，将值附加到单选按钮而不是下拉框

1 个答案: