要做一个 select 的表单,想直接用 django 的 form 功能,这样就省去了一些自己写验证等一些乱七八糟功能。
现在在 form.py 内容如下
class LogSearchForm(forms.Form):
# platformId = forms.IntegerField(label='所属平台')
platformId = forms.ModelChoiceField(label='所属平台',queryset=plat_info.objects.all(),to_field_name='plat_id',empty_label='选择平台')
# gameOuterIp = forms.GenericIPAddressField(label="游戏服")
gameOuterIp = forms.ModelChoiceField(label='游戏服',queryset=eva_game_list.objects.values('gameOuterIp'),empty_label='选择游戏服')
# dbInnerIp = forms.ModelChoiceField(label='DB',queryset=abc_game_list.objects.values_list('dbInnerIp'),empty_label='选择 db')
dbInnerIp = forms.ModelChoiceField(label='DB', queryset=abc_game_list.objects.values('dbInnerIp'),empty_label='选择 db')
其中调用到的 models.py 中的 abc_game_list
class abc_game_list(models.Model):
platformId = models.IntegerField(u"平台 ID")
serverId = models.IntegerField(u"游戏服 ID",primary_key=True,unique=True)
gameOuterIp = models.GenericIPAddressField(u"游戏服外网 IP")
dbInnerIp = models.CharField(u"数据库内网 IP",max_length=50)
group = models.CharField(u'所属组',max_length=100,default='')
notes = models.CharField(u"备注",max_length=100,default=u'备注信息')
前端 html 内容
<div class="col-lg-12">
<form class="form-line" method="post" action="/items/search_log/">
{{ log_form }}
</form>
</div>
最后显示成这样 直接源码查看
<option value="" selected="selected">选择游戏服</option>
<option value="{'gameOuterIp': u'192.168.10.221'}">{'gameOuterIp': u'192.168.10.221'}</option>
<option value="{'gameOuterIp': u'192.168.10.206'}">{'gameOuterIp': u'192.168.10.206'}</option>
<option value="{'gameOuterIp': u'192.168.10.128'}">{'gameOuterIp': u'192.168.10.128'}</option>
<option value="{'gameOuterIp': u'192.168.10.58'}">{'gameOuterIp': u'192.168.1058'}</option>
<option value="{'gameOuterIp': u'192.168.10.151'}">{'gameOuterIp': u'192.168.10.151'}</option>
<option value="{'gameOuterIp': u'192.168.10.221'}">{'gameOuterIp': u'192.168.10.221'}</option>
<option value="{'gameOuterIp': u'192.168.10.206'}">{'gameOuterIp': u'192.168.10.206'}</option>
<option value="{'gameOuterIp': u'192.168.10.221'}">{'gameOuterIp': u'192.168.10.221'}</option>
<option value="{'gameOuterIp': u'192.168.10.206'}">{'gameOuterIp': u'192.168.10.206'}</option>
<option value="{'gameOuterIp': u'192.168.10.128'}">{'gameOuterIp': u'192.168.10.128'}</option>
<option value="{'gameOuterIp': u'192.168.10.58'}">{'gameOuterIp': u'192.168.1058'}</option>
<option value="{'gameOuterIp': u'192.168.10.151'}">{'gameOuterIp': u'192.168.10.151'}</option>
<option value="{'gameOuterIp': u'192.168.10.221'}">{'gameOuterIp': u'192.168.10.221'}</option>
<option value="{'gameOuterIp': u'192.168.10.206'}">{'gameOuterIp': u'192.168.10.206'}</option>
<option value="{'gameOuterIp': u'192.168.10.128'}">{'gameOuterIp': u'192.168.10.128'}</option>
<option value="{'gameOuterIp': u'192.168.10.58'}">{'gameOuterIp': u'1192.168.1058'}</option>
<option value="{'gameOuterIp': u'192.168.10.151'}">{'gameOuterIp': u'192.168.10.151'}</option>
</select></td></tr>
这里可以看出, option value 和页面显示的值都是不对的。
如果不用 form 功能,自己直接写 html , html 内容
<div class="form-group col-sm-2">
<label for="exampleInputEmail2">游戏服</label>
<select id="id_select" class="form-control selectpicker" name="gameOuterIp" data-live-search="true">
<option value ="">选择游戏服</option>
{% for game in gamelists %}
<option value ="{{ game.gameOuterIp }}">{{game.group}}   s{{ game.serverId }}服</option>
{% endfor %}
</select>
</div>
源码查看
会如下显示
<div class="form-group col-sm-2">
<label for="exampleInputEmail2">游戏服</label>
<select id="id_select" class="form-control selectpicker" name="gameOuterIp" data-live-search="true">
<option value ="">选择游戏服</option>
<option value ="192.168.10.221">abc-IOS   s1 服</option>
192.168.10 abc
<option value ="192.168.10.206">abc-IOS   s2 服</option>
192.168.10 abc
<option value ="192.168.10.128">abc-IOS   s3 服</option>
192.168.10 abc
<option value ="192.168.10.58">abc-IOS   s4 服</option>
192.168.10 abc
<option value ="192.168.10.151">abc-IOS   s5 服</option>
192.168.10 abc
<option value ="192.168.10.221">abc-IOS   s6 服</option>
192.168.10 abc
<option value ="192.168.10.206">abc-IOS   s7 服</option>
192.168.10 abc
<option value ="192.168.10.221">abc-IOS   s8 服</option>
192.168.10 abc
<option value ="192.168.10.206">abc-IOS   s9 服</option>
192.168.10 abc
<option value ="192.168.10.128">abc-IOS   s10 服</option>
192.168.10 abc
<option value ="192.168.10.58">abc-IOS   s11 服</option>
192.168.10 abc
<option value ="192.168.10.151">abc-IOS   s12 服</option>
192.168.10 abc
<option value ="192.168.10.221">abc-IOS   s13 服</option>
192.168.10 abc
<option value ="192.168.10.206">abc-IOS   s14 服</option>
<option value ="192.168.10.128">abc-IOS   s15 服</option>
<option value ="192.168.10.58">abc-IOS   s16 服</option>
<option value ="192.168.10.151">abc-IOS   s17 服</option>
</select>
</div>
那么,我想要用 form.ModelChoiceField 来完成正常 select 功能,要如何处理?
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.