jqueryプラグインを使用するselect2 with bootstrap 3

select2を使用しようとしていますが、できません。jqueryプラグインを使用するselect2 with bootstrap 3

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" /> 
<link rel="stylesheet" type="text/css" href="select2-bootstrap.css"> 

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

をし、これが私のHTMLとJSコードです：

私は私の<head>セクションに次のコードを使用してい

<script type="text/javascript"> 
$('locationMultiple').select2({ 
    theme: "bootstrap" 
}); 
</script> 

<p> 
<select class="locationMultiple form-control" multiple="multiple"> 
    <option value="1d4h7g">Abondance (74360)</option> 
    <option value="lf9k9d">Alby-Sur-Cheran (74540)</option> 
    ... 
</select> 
</p>

しかし、私の選択は、必死のように複数の行をご利用いただけます。
誰かが私がどこで何を間違っているのかを知るのに役立つことができますか？

このコードは間違いなくあなたのために働く

出典

2016-05-26 Laurent

チェックインコンソールのいずれかのエラーが発生した場合 –

...

あなたはJavaScriptでこのコードを記述する必要があります。

$(document).ready(function() { 
    $.fn.select2.defaults.set("theme", "bootstrap"); 
    $(".locationMultiple").select2({ 
     width: null 
    }) 
});

ライブ例：https://jsfiddle.net/rajnikpatel/1vje5rxo/

出典

2016-05-26 09:33:42

ありがとうございます、私のサイトではなく、フィドルでうまくいきます... – Laurent

'select2-bootstrap.css'の正しいCSSパスを追加してください。 –

@Laurent - 私あなたのselect2 jsコードを$（document）.ready（）の中に移動することを考えてください。最後にbodyに移動すると、select要素の前にjsコードが呼び出されます。また、エラーがある場合は、ブラウザのコンソールにチェックを入れてください。 –

jqueryプラグインを使用するselect2 with bootstrap 3

答えて

関連する問題