我在Bootstrap网站/表单的<select>
框中显示数据选项。以下是代码:
// Status
echo '<label for="data_status" class="col-md-2 control-label">Status</label>';
echo '<div class="col-md-3">';
echo '<select class="form-control" data-toggle="dropdown" id="data_status">';
echo '<option value="1">Active</option>';
echo '<option value="2">Maint</option>';
echo '<option value="3">Storage</option>';
echo '<option value="4">Decomm</option>';
echo '<option value="5">Reclaim</option>';
echo '</select>';
echo '</div>'; // End Status
我尝试了多种方法,包括<ul>/<li>
结构,bootstrap-select插件等。
在给定数据库中对象的当前状态的情况下,此数据是由AJAX查询设置的集合列表。那部分工作正常。
我的问题是,在GUI中,表单中有两个框。一个是保存所选数据的文本框,正下方是带有插入符号的下拉列表。 See Screenshot here.
这似乎是缺少CSS或缺少javascript来隐藏下拉菜单本身?下面是包含和CSS的头文件部分。
<!-- Libraries -->
<script type="text/javascript" src="includes/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="includes/jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript" src="includes/bootstrap.min.js"></script>
<script type="text/javascript" src="includes/formValidation/formValidation.min.js"></script>
<script type="text/javascript" src="includes/formValidation/framework/bootstrap.min.js"></script>
<script type="text/javascript" src="includes/datepicker/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="includes/bootstrap-select/bootstrap-select.min.js"></script>
<!-- Style sheets -->
<link rel="stylesheet" href="includes/bootstrap/css/bootstrap.slate.min.css" type="text/css" />
<link rel="stylesheet" href="includes/bootstrap/css/dashboard.css" type="text/css" />
<link rel="stylesheet" href="includes/css/formValidation.min.css" type="text/css" />
<link rel="stylesheet" href="includes/datepicker/bootstrap-datepicker.min.css" type="text/css" />
<link rel="stylesheet" href="includes/bootstrap-select/bootstrap-select.min.css">
关于为什么这个下拉/选择行为不正确的任何想法,并且显示两个方框而不是预期的一个?
答案 0 :(得分:1)
包括jquery-mobile库。从页面中删除它,它正在工作。