web-dev-qa-db-ja.com

jQuery Select2プレースホルダーが機能しない

私はこのドキュメントをフォローしています http://ivaynberg.github.io/select2/placeholderで選択ボックスを作成します。私の問題は、placeholderが機能しないことです。このコードの修正を手伝ってもらえますか？

コード： http://jsfiddle.net/VwGGU/3/

[〜＃〜] html [〜＃〜]：

<select style="width:300px" id="source">
    <optgroup label="Alaskan/Hawaiian Time Zone">
        <option value="AK">Alaska</option>
        <option value="HI">Hawaii</option>
    </optgroup>
    <optgroup label="Pacific Time Zone">
        <option value="CA">California</option>
        <option value="NV">Nevada</option>
        <option value="OR">Oregon</option>
        <option value="WA">Washington</option>
    </optgroup>
</select>

Javascript：

$("#e2").select2({
    placeholder: "Select a State",
    allowClear: true
});

上記の例は、「アラスカ」の代わりに「状態の選択」を示していますプレースホルダーとして。

更新1：

select2.jsと空のoptionを追加しました。 placeholderはまだ表示されません

[〜＃〜] html [〜＃〜]

<select style="width:300px" id="source" placeholder="testt test">
    <option></option>
    <optgroup label="Alaskan/Hawaiian Time Zone">
        <option value="AK">Alaska</option>
        <option value="HI">Hawaii</option>
    </optgroup>
    <optgroup label="Pacific Time Zone">
        <option value="CA">California</option>
        <option value="NV">Nevada</option>
        <option value="OR">Oregon</option>
        <option value="WA">Washington</option>
    </optgroup>

[〜＃〜] js [〜＃〜]

$(document).ready(function () {
    $("#source").select2({
        placeholder: "Select a State",
        allowClear: true
    });
});

http://jsfiddle.net/VwGGU/6/

更新2：

.cssと.jsリンクをgithubからコピーしたときにjsfiddleがエラーを出したのは奇妙です。このバージョンは動作します

[〜＃〜] html [〜＃〜]

<select style="width:300px" id="source" >
    <option></option>
    <optgroup label="Alaskan/Hawaiian Time Zone">
        <option value="AK">Alaska</option>
        <option value="HI">Hawaii</option>
    </optgroup>
    <optgroup label="Pacific Time Zone">
        <option value="CA">California</option>
        <option value="NV">Nevada</option>
        <option value="OR">Oregon</option>
        <option value="WA">Washington</option>
    </optgroup>

[〜＃〜] js [〜＃〜]

$(document).ready(function () {
    $("#source").select2({
        placeholder: "Select a State",
        allowClear: true
    });
});

http://jsfiddle.net/VwGGU/9/

javascriptjqueryhtmltwitter-bootstrapjquery-select2
19
HP.

select要素のIDはsourceですが、idのターゲットはe2をjQueryセレクターで使用し、空の<option> 鬼ごっこ

31
Pierre

これをしましたか：

プレースホルダーが複数値以外の選択ボックスに使用される場合、最初のオプションとして空のタグを含める必要があります

42
Mediabeastnz
$selectElement.select2({
    minimumResultsForSearch: -1,
    placeholder: 'Select Relatives'
}).on('select2-opening', function() {
    $(this).closest('li').find('input').attr('placeholder','Select Relative');
});
1
Amar Jagtap
<select id="select2Box" class="form-control brand-select">
    <option value="">Select Franchise</option>
</select>
1
Malladi Bhaskar

これを試してください。htmlでは、次のコードを記述します。

<select class="select2" multiple="multiple" placeholder="Select State">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
</select>

そして、スクリプトに以下のコードを書きます。

<script>
         $( ".select2" ).select2( { } );
 </script>
0
Raham

空のオプションタグを選択に追加する必要があります。

<select data-placeholder="Chose number" data-allow-clear="true" data-width="50%">
    <option></option>
    <option value="1">Number one</option>
    <option value="2">Number two</option>
    <option value="3">Number three</option>
</select>

このリンクを確認してください プレースホルダーは空のオプション要素がある場合のみ機能します

0
anayarojo