Javascript 如何从引导下拉按钮中获取选择以显示在输入字段中？

我正在尝试实现一个带有引导的表单，它将为用户提供从下拉菜单中选择不同输入的选项

我已经使用了引导文档中的模板来编写我的HTML&我已经根据需要在HTML文件的顶部包含了样式表、jQuery和JS依赖项

我能够正确显示各个输入组，但当用户从下拉列表中选择所需选择时，它不会根据需要显示在输入字段中

以下是我在JS文件中嵌入的HTML：

'<div class="col-lg-6">' +
                    '<div class="input-group">' +
                        '<div class="input-group-btn">' +
                            '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Issue Type<span class="caret"></span></button>' +
                            '<ul class="dropdown-menu">' +
                                '<li><a href="#">Logic Error</a></li>' +
                                '<li><a href="#">Improper Display</a></li>' +
                                '<li><a href="#">System Crash</a></li>' +
                                '<li role="separator" class="divider"></li>' +
                                '<li><a href="#">Feature Request</a></li>' +
                            '</ul>' +
                        '</div><!-- /btn-group -->' +
                        '<input type="text" class="form-control" placeholder="Select Issue Type" aria-label="Text input with dropdown button">' +
                    '</div><!-- /input-group -->' +
                '</div><!-- /.col-lg-6 -->' 

以下是我根据引导程序的要求在标记中包含的依赖项：

<title>Bug Tracking</title>

    <!-- Bootstrap & Core CSS (DPL) -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> -->   
    <link rel="stylesheet" href="/orion/ccdd.css">

    <!-- Bootstrap, Custom, & Core jQuery Plugins DPL -->
    <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.12.4.min.js"></script> <!-- NEW ***-->
    <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> <!-- NEW -->
    <script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script> <!-- NEW -->
    <script type="text/javascript" charset="utf8" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <!-- NEW -->
    <script type="text/javascript" charset="utf8" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- NEW ***-->

如何使用标准引导实现获取要显示的选定下拉信息？如果可能的话，我想尝试在不必编写任何特殊JavaScript函数的情况下实现它，如果这是它应该如何工作的话

---

添加：这是CodePen中的代码示例：

这是一个解决方案

createBugForm=函数{ $div.create.append ` 错误跟踪数据库即将到来！ 发行名称 跟踪ID 开

---

Shiladitya先生，我刚刚为你添加了一个代码笔的链接。一个小提示：研究如何使用JavaScript字符串插值来摆脱HTML每行之间那些讨厌的+符号。Mr.Pytth…我在上面！我觉得这与JS.in中嵌入的混乱的HTML有关，这是很可笑的关于依赖项。这些应该放在我的标签上还是直接放在我的标签上？我仍然对日期时间选择器有问题，我想知道这是否只是我将依赖项放在我的标签上的顺序…再次感谢！这里向所有的无名英雄致敬！我收到一个未捕获的TypeError$…datetimepicker是Object.fireWith[as resolveWith]jQuery-1.12.4.min.js:2上没有函数。你知道如何解决这个问题吗？检查…我使用过的任何文件检查并使用它。