Javascript 用于从一个列表到另一个列表选择字段并传递到Django视图的HTML模板

我是UI开发新手，所以不确定我要找的模板叫什么。我试着在网上搜索，但几乎没有结果

我目前有60多个字段要选择，所以我想提供这60个字段的列表，用户可以选择其他列表中所需的字段

设计这种模板的任何线索都将非常有用，特别是源代码或一些参考链接。提前谢谢

编辑：我的模板代码：

html:

选择要分析的字段：




{u name%}字段中的字段为%
{{field.fieldname}

{%endfor%}


选定字段











好啊

css:

.fieldBox{
右边距：150px；
左边距：150像素；
}
.field-list1{height:400px；width:30%；float:left；overflow:hidden；overflow-y:scroll；}
.field-list2{高度：150px；页边距顶部：200px；左边距：自动；右边距：自动；宽度：65px；}
.field-list3{height:400px；width:30%；float:right；overflow:hidden；overflow-y:scroll；}

请提供您已经编写的任何代码。我们可以帮助您调试代码，但此网站不允许其他人从头开始编写您的代码。同意：）这就是我要求提供一些参考链接的原因。现在我只有包含这些列和我的字段（格式不好：（））的模板，但我不知道如何选择每个字段，例如“apple”，然后单击右箭头按钮将apple推到第二列，以便将其作为post参数发送到我的视图。

<div class="row">
    <div class="col-sm-12">
        <h3>Select your fields for analysis:</h3><br><br><br>
    </div>

    <div class="fieldBox">

        <div class="column">
            <ul class="field-list1" style="list-style-type:none">
                {% for field in field_names %}
                    <li><p> {{ field.fieldname }} </p></li>
                {% endfor %}
            </ul>
        </div>

        <div class="column">
            <ul class="field-list3" style="list-style-type:none">
                <p> Selected fields </p>
            </ul>
        </div>

        <div class="column">
            <ul class="field-list2" style="list-style-type:none">
                <li><button type="button"><span class="glyphicon glyphicon-chevron-right"></span></button></li><br><br>
                <li><button type="button"><span class="glyphicon glyphicon-chevron-left"></span></button></li>
            </ul>
        </div>

    </div>

    <div class="col-sm-12"><br><br>
        <button type="button" class="btn btn-success" style="float:right; margin-right: 150px">
                <span class="glyphicon glyphicon-circle-arrow-right"></span>&nbsp; OK
        </button>
    </div>
</div>

<style type="text/css">
.fieldBox {
    margin-right: 150px;
    margin-left: 150px;
   }
.field-list1 {height:400px; width:30%; float:left; overflow:hidden; overflow-y:scroll;}
.field-list2 {height:150px; margin-top:200px; margin-left:auto; margin-right:auto; width:65px;}
.field-list3 {height:400px; width:30%; float:right; overflow:hidden; overflow-y:scroll;}
</style>