bootstrap下拉框selectpicker使用

2021-12-20 11:03:24 阅读：343 来源： 互联网

标签：moauditool ip bootstrap selectpicker hostlist html host moa 下拉框

一、配置引用

    <!-- select   -->
    <link href="Content/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="Content/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet"/>

    <script src="Content/jquery-1.9.1.min.js"></script>
    <script src="Content/bootstrap/js/bootstrap.min.js"></script>
    <script src="Content/bootstrap-select/js/bootstrap-select.min.js"></script>
    <script src="Content/bootstrap-select/js/i18n/defaults-zh_CN.min.js"></script>

二、修改前端代码

html设置展示

 <div class="form-group">
      <label class="col-sm-2 control-label">测试环境</label>

      <div class="col-sm-8">
            <select id="moa_ip" class="selectpicker">
                   {% for host in hostlist %}
                    <option value="{{host.hostname}}">{{host.hostname}}</option>
                    {% endfor %}
            </select>
      </div>
 </div>

js获取参数

var moa_ip = $('#moa_ip').val();

后端返回hostlist数据

def moauditool(request):
    hostlist = getAllHost()
    
    return render(request, 'ctest/moauditool/index.html',{"hostlist":hostlist})

标签：moauditool,ip,bootstrap,selectpicker,hostlist,html,host,moa,下拉框
来源： https://www.cnblogs.com/sugoi/p/15709935.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

bootstrap下拉框selectpicker使用