我需要有一个向下钻取表单,用户首先从下拉框中选择“主题”,相应的“背景图像”将显示隐藏的单选按钮。例如,如果我选择山作为我的主题,那么只有洛矶山和富士将在表格上显示。
表格如下:
<form ...>
<select name="theme" onChange="showBackgroundDiv(this);">
<option value="0">Mountains</option>
<option value="1">Jungles</option>
</select>
<div id="0">
<input type="radio" name="background" value="rocky-mountain.png" alt="mountain rocky"><img src="rocky-mountain.png" /><br />
<input type="radio" name="background" value="fuji.png" alt="mountain fuji"><img src="fuji.png" />
</div>
<div id="1">
<input type="radio" name="background" value="amazon-rainforest.png" alt="forest amazon">Amazon Rainforest <br />
</div>
</form>
实际上有两个问题:
1)如何让django表单字段在背景图像无线电输入字段中将相关项目分组(作为div)?我试着手动做这个非常难看。
2)实现隐藏/显示背景图像。
我正在使用django,我能想到的唯一解决方案是:
a)使用jQuery之类的JavaScript库。当用户选择主题时,发送ajax请求以检索单选按钮的值。 Pro:常用模式。缺点:即使列表相对较短,也会发送第二个请求。我需要做更多的工作。
b)再次使用JS库,使用值,alt和name从无线电输入字段重构“主题”。亲:没有第二次请求。缺点:很多JS看起来很糟糕。
c)使用/修改预构建的django应用,例如django-smart-select。专业:由其他人单独维护。来源可用。缺点:自定义应用程序可能需要更多的工作,而不仅仅是自己做,我甚至可能无法弄清楚如何自定义它。还需要一个数据库,现在我将选项存储在一个元组中,以便与Field Widget一起使用。
那么有关如何最好地实现这一点以便重新使用和分离内容和演示文稿的任何建议?