Twitter bootstrap x-可编辑多输入组（文本框，下拉列表…）

我想在地址等输入组上添加x-editable。我希望在我的代码中有一个文本框和三个下拉框。有人能帮我添加x-可编辑代码吗

我为可编辑字段创建代码，如：

<a href="#" class="editable_ddrfields margin-left-10" id="due_date_rule" name="due_date_rule" data-type="due_date_rule" data-clear="false" data-pk="1" data-url="update_field'; ?>">Add Rule</a>

脚本代码：

$('.editable_ddrfields').editable({
     tpl: '<div class="editable-address"><label><span>Days: </span><input type="text" name="due_date_count" id="due_date_count1" class="form-control input-small" onkeypress="return isNumberKey(event);"></label></div>'+
         '<div class="editable-address"><label><span>Day Type: </span><select name="due_day_type" id="due_day_type1" class="form-control input-small" data-xeditable="true"><option value="days">Days</option><option value="weekdays">Weekdays</option></select></label></div>'+
         '<div class="editable-address"><label><span>Range Type: </span><select name="due_range_type" id="due_range_type1" class="form-control input-mini" data-xeditable="true" onchange="change_range_type2(this.value);"><option value="before">Before</option><option value="on">On</option><option value="after">After</option></select></label></div>'+
         '<div class="editable-address"><label><span>Date Type: </span><select name="due_date_type" id="due_date_type1" class="form-control input-mini" data-xeditable="true"><option value="1">Listing Date</option><option value="2">Expiration Date</option><option value="3">Closing Date</option><option value="4">Contingency Removal Date</option><option value="5">Contract Date</option></select></label></div>',
    success: function(response, newValue) {
        $('#due_date_rule').html(newValue);
    }
});

$（'.editable\u ddrfields'）。可编辑({
第三方物流：“天：”+
“日期类型：DaysWeekdays”+
'范围类型：BeforeOnAfter'+
'日期类型：上市日期到期日期截止日期意外事件删除日期合同日期'，
成功：函数（响应，newValue）{
$（'due#date_rule'）.html（newValue）；
}
});

若我单击submit按钮，代码运行良好，但当我单击edit时，它不会带有基于数据库的选定值。此外，我还需要基于“到期日范围类型”选择框值的所需验证文本框

请帮我解决这个问题