Django-select下拉菜单的显示与保存

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Django-select下拉菜单的显示与保存相关的知识,希望对你有一定的参考价值。

参考技术A

Django-select下拉菜单的显示与保存:

说明: 这里不用多解释,就是普通定义emp表和dept表,注意emp的dept部门字段使用的ForeignKey多对一关系,去关联dept表的主键(dept没有重新定义主键,则是默认的主键id)

说明: 这里的例子是保存时候的操作,既要展示不同部门的下拉菜单,又要能够保存成功。需要注意以下地方:
1.要重新定义get,实现当加载网页的时候能够展示已保存的部门信息,所以有个 deptlist = dept.objects.all() ,在html中要使用deptlist取部门表中的值。
2.当使用POST要保存的时候还是按照正常逻辑,先从html取对应的值,然后新建一个emp()对象,给对应字段赋值后保存。
3.保存部门的时候,对于外键,emp表是主动增加了一个叫做emp_id的字段,所以要使用 emp.dept_id = dept ,将获取到的dept(id)传给emp的dept_id字段。

说明: 下拉单选菜单使用 select,option ,使用for循环从deptlist中取部门的值展示出来。所以是 % for i in deptlist.values % ,注意显示的字段使用deptname,对应value使用id来用来存储在数据表中。

javascript实现下拉菜单的显示与隐藏

demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现下拉菜单效果</title>
    <link rel="stylesheet" type="text/css" href="demo.css">
    <script type="text/javascript" src="demo.js"></script>
</head>
<body>
<div id="nav">
    <ul>
        <li><a href="#">首页</a></li>
        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">课程大厅</a>
            <ul>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">Html/CSS</a></li>
            </ul>
        </li>
        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">学习中心</a>
            <ul>
                <li><a href="#">视频学习</a></li>
                <li><a href="#">实例练习</a></li>
                <li><a href="#">问与答</a></li>
            </ul>

        </li>
        <li><a href="#">经典案例</a></li>
        <li><a href="#">关于我们</a></li>

    </ul>

</div>
</body>
</html>

  demo.js

function displaySubMenu(li) {

    var subMenu = li.getElementsByTagName("ul")[0];

    subMenu.style.display = "block";

}

function hideSubMenu(li) {

    var subMenu = li.getElementsByTagName("ul")[0];

    subMenu.style.display = "none";

}

  demo.css

*{ margin:0px; padding:0px;}
body{ font-family:Verdana, Geneva, sans-serif; font-size:14px;}
#nav{ width:600px; height:40px; background-color:#eee; margin:0 auto;}
ul{ list-style:none;}
ul li{ float:left; line-height:40px; text-align:center; width:100px;}

a{ text-decoration:none; color:#000; display:block;}
a:hover{ color:#F00; background-color:#666;}



ul li ul li{ float:none;background-color:#eee; margin:2px 0px;}

ul li ul{ display:none;}

  效果:

 

2017-09-0 6   2017-09-06   

以上是关于Django-select下拉菜单的显示与保存的主要内容,如果未能解决你的问题,请参考以下文章

在 MVC 中选择下拉菜单的设置值问题

excel里突然多了一个空白的下拉菜单

如何在 laravel 8 中保存嵌套的下拉菜单

无法在帖子中保存和显示更新的自定义多选下拉字段

vue最多显示2个按钮,超出的用下拉菜单显示

iOS仿微信、支付宝首页下拉菜单选择视图