2016-07-16 5 views
0

ブートストラップサイト/フォームの<select>ボックスにデータオプションを表示しています。ブートストラップ3選択ボックスには2つのボックスが表示されます

// 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 

私はこのデータには、現在与えられ、AJAXクエリによって設定されているセットリストであるなど<ul>/<li>構造、bootstrap-selectプラグインを含め、

を複数のアプローチを試してみました:以下のコードですデータベース内のオブジェクトの状態。その部分は正常に動作します。

私の問題は、GUIでは、フォームに2つのボックスがあることです。 1つは選択されたデータを保持するテキストボックスで、そのすぐ下にはキャレット文字のドロップダウンがあります。 See Screenshot here.

これは、ドロップダウンメニュー自体を非表示にするCSSが不足しているか、javascriptが不足しているようですか?以下は、includeと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"> 

このドロップダウン/選択が正しく動作しない理由については、考えられているものの代わりに2つのボックスが表示されていますか?

+0

** bootstrap-select **とのコードの競合がないか確認できますか? –

+0

これは私がbootstrap-selectを試す前に起こっていましたが、JavascriptとCSSのリンクを削除してもダブルボックスには影響しません。 – Rook

+0

真剣に?おそらくPHPスクリプトが選択ボックスを複製していますか? –

答えて

1

jquery-mobileライブラリを含めました。ページからそれを削除し、それが動作しています。

関連する問題