一、配置引用

    <!-- 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})