Javascript 使用jQuery动态显示Django表单中的选定选项

我有这样的Django html表单：

 <form class="form-horizontal" method="POST" action="." enctype="multipart/form-data">
    <div class="form-group">
        <label class="control-label col-sm-2">Task</label>
        <div class="col-sm-3">
            <select class="form-control" name="task_name" id="task_name" onchange="show()">
                <option value="" hidden>Select</option>
                {% for item in tasks %}
                    <option>{{item.task_name}}</option>
                {% endfor %}
            </select>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-5 submit">
                <button type="submit" class="btn btn-primary" value="Add" name="save">Save</button>
        </div>
    </div>
 </form>

其中项包含字典数据

我需要动态创建几行html代码，其中包含所选项目的数据

目前，我只能获取选定的文本值[我是jQuery新手]。但它在选择后不会动态显示

我的jQuery：

<script type="text/javascript">
    $(function show(){
        var txt = $("#task_name").val();
        $('#txt_name').val(txt);
    });
</script>

目的地：

<p id="txt_name"/>

---

谢谢您的时间。

您需要一个事件处理程序

尝试：

---

您需要为select输入的onChange事件注册一个事件处理程序。另外，要设置标记的文本，您需要调用方法text。 以下是一个工作示例：

//定义一个事件处理程序，不要调用它 功能表演{ var txt=$task_name.val； console.logtxt；//为了查看方法何时运行，可以在生产环境中删除 $'txt_name'.texttxt；//您需要调用text来设置 } $task_name.onchange，show；//为select输入的onChange注册事件处理程序 选择 任务1 任务2 任务3

---

您需要添加一个事件监听器，以便在更改您的选择输入时使用。@VaibhavVishal我已尝试过此方法，但不起作用。我只有在提交表单后才会收到选中的文本。请检查我的答案。这到底是一个Python/Django问题吗？？？已删除标记。谢谢：。您知道如何从所选项目获取数据吗？您可以将每个选项的附加数据存储在某些数据属性中，并使用.data访问它。谢谢：。您知道如何从所选项目获取数据吗？哪些数据。您已经在var txt=$task_name.val中具有所选选项的值；但这只是选定的值。我需要在下一步中从选定的字典项中获取数据。在django模板中太复杂了。切换到Django API+单独的js前端React、Angular等，如果您有那么复杂的需求。如果使用Django模板，则必须将任务列表转储为json，并将其另存为模板中的js数组。然后，您将使用js创建选项，而不是在Django模板中使用for循环。还可能会根据任务的来源打开您的网站以查找安全漏洞。

$(function(){
    $("#task_name").on("change",function(){
      $('#txt_name').val($(this).val());
    });
 });