Bootstrap3选择框显示两个框

时间:2016-07-16 18:02:08

标签: css twitter-bootstrap drop-down-menu

我在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">

关于为什么这个下拉/选择行为不正确的任何想法,并且显示两个方框而不是预期的一个?

1 个答案:

答案 0 :(得分:1)

包括jquery-mobile库。从页面中删除它,它正在工作。