场景:1、选择下拉框任务名称后,列出任务的所有IP 2、选择对应任务IP后,列出具体内容信息
html代码如下:
1 {% block content %} 2 <div class="ui two column stackable grid" style="margin-top:4em;margin-left: 14em"> 3 <div class="column"> 4 <div> 5 <select name="skills" class="ui dropdown" id="mission-select" style="width: 250px"> 6 {% for name in mission %} 7 <option value="{{ name.0 }}">{{ name.0 }}</option> 8 {% endfor %} 9 </select> 10 </div> 11 </div> 12 <div class="column"> 13 <div class="ui search"> 14 <div class="ui icon input"> 15 <input class="prompt" placeholder="IP搜索" type="text"> 16 <i class="search icon"></i> 17 </div> 18 </div> 19 </div> 20 </div> 21 </div> 22 <h4 class="ui horizontal divider header"><i class="bar"></i>详细信息</h4> 23 24 <!--触发下拉框后显示的IP列表--> 25 <div class="ui one row padded grid"> 26 <div class="three wide column"> 27 <div class="ui secondary vertical menu" id="iplist"> 28 29 </div> 30 </div> 31 <div class="twelve wide column"> 32 <table class="ui celled padded table"> 33 <thead> 34 <tr> 35 <th class="single line">IP地址</th> 36 <th>端口</th> 37 <th>状态</th> 38 <th>服务</th> 39 <th>用户名/密码</th> 40 <th>Banner</th> 41 <th>title</th> 42 <th>任务名称</th> 43 </tr></thead> 44 <!--显示IP信息表格--> 45 <tbody id="ip_info"> 46 47 </tbody> 48 </table> 49 </div> 50 </div> 51 {% endblock %}