从下拉列表中获取所选字段的值

时间:2010-06-13 16:54:37

标签: jquery django django-forms

我的模型中有这个类:

class ServiceCharge(models.Model):
  name = models.CharField(max_length=30)
  amount = models.PositiveIntegerField()
  extends_membership = models.BooleanField(default=False)

  def __unicode__(self):
    return str(self.name)

我想要的是向用户收取服务费用的表格,当从下拉菜单中选择费用时,amountextends_membership的两个值会根据表格更新选定的费用。

我的forms.py:

class vModelChoiceField(forms.ModelChoiceField):
  def label_from_instance(self, obj):
    return "%s" % obj.name

class PayServiceChargeForm(PaymentsForm):
    service_charge = vModelChoiceField(queryset=ServiceCharge.objects.all(), 
      empty_label="     ")

    class Meta(PaymentsForm.Meta):
      exclude = ('member', 'payment_type', 'transacted_by', 'description')

然后是表单模板:

<table border="0">
  <tr>
    <td><strong>{% trans "Service Charge" %}</strong></td>
    <td>{{ form.service_charge }}</td>
    <td><strong>{% trans "Extends Membership" %}</strong></td>
    <td>{{ form.extends_membership }}</td>
  </tr>
  <tr>
    <td valign="top"><strong>{% trans "Expiry Date" %}</strong></td>
    <td valign="top">{{ form.expiry_date }}</td>
    <td valign="top"><strong>{% trans "Amount" %}</strong></td>
    <td>{{ form.amount }}</td>
  </tr>
 </table>

我正在尝试一些jQuery但是在获得当前选择的费用后我被卡住了:

<script type="text/javascript">
$(document).ready(function(){
    $("#id_service_charge").change(onSelectChange);
});

function onSelectChange(){
    var selected = $("#id_service_charge option:selected");     
    var output = "";
    if(selected.val() != 0){
        charge = selected.val();
        .... (update values) ....
    }
}
</script>

1 个答案:

答案 0 :(得分:1)

我会通过向服务器调用与所选费用相关的金额和extended_membership的AJAX调用,然后使用检索到的数据更新html字段来实现此目的。

要做到这一点,你需要在onSelectChange()

上添加这样的东西
$.post(URL_TO_YOUR_VIEW, {charge: charge}, function(data) {
    //here you can use jquery to insert values to the html like this:
    $('#id_ammount').val(data.ammount);
    //also update extended membership you can sth like this:
    if(data.extended_membership)
    {
         $('#id_extended_membership').attr('checked', 'checked');
    }   
    else
    {
         $('#id_extended_membership').removeAttr('checked');
    }
}, "json");

在服务器端,您需要添加视图来处理ajax调用。它看起来可能类似于:

def magic_view_name(request):
    if request.is_ajax() and request.method == 'POST':
        charge = request.POST['charge']
        ammount = #get ammount somehow
        extended_memebership = #get ext. memebership somehow
        data = simplejson.dumps({'ammount': ammount,
                                 'extended_membership': extended_membership}, 
                                encoding="utf-8", 
                                ensure_ascii=False)
        return HttpResponse(data, mimetype="application/javascript")

    return HttpResponse(u'No data for you')

您还需要在urls.py中添加正确的网址格式,这应该可以。

希望它对你有所帮助。

顺便说一句,我想您不希望允许用户更改所选ServiceCharge的价格。如果是这样,您可以将它们显示为只读值而不是可编辑的表单字段。