web-dev-qa-db-ja.com

select2フレームワークでデフォルト値としてプレースホルダーを使用する方法

私が使用しているselect2の選択された値を取得するには：

var x = $("#select").select2('data');
var select_choice = x.text

問題は、値が選択されていない場合にエラーがスローされることであり、オプションが選択されていない場合にプレースホルダーを返す方法があるかどうか疑問に思っていました

jqueryjquery-selectorsjquery-select2
39
Gottfried

プレースホルダーを表示するには、最初の要素として空のオプション（つまり、<option></option>）を追加する必要があります。

Select2公式ドキュメントから：

」ブラウザは、複数値以外の選択ボックスで最初のオプション要素が選択されていると想定しているため、プレースホルダーが機能するには空の最初のオプション要素を提供する必要があります（<option></option>）。 "

お役に立てれば。

例：

<select id="countries">
    <option></option>
    <option value="1">Germany</option>
    <option value="2">France</option>
    <option value="3">Spain</option>
</select>

javascriptは次のようになります。

$('#countries').select2({
    placeholder: "Please select a country"
});
93
meherzi.sahbi

これをスクリプトファイルに追加します。

$('select').select2({
    minimumResultsForSearch: -1,
    placeholder: function(){
        $(this).data('placeholder');
    }
});

次に、HTMLで次のコードを追加します。

<select data-placeholder="Your Placeholder" multiple>
    <option></option> <------ this is where your placeholder data will appear
    <option>Value 1</option>
    <option>Value 2</option>
    <option>Value 3</option>
    <option>Value 4</option>
    <option>Value 5</option>
</select>
37
Oleg Sewruk
$("#e2").select2({
   placeholder: "Select a State",
   allowClear: true
});
$("#e2_2").select2({
   placeholder: "Select a State"
});

プレースホルダーは、selectにアタッチされたdata-placeholder属性を介して、またはサンプルコードに示すようにプレースホルダー構成要素を介して宣言できます。

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

必要に応じて、選択ボックスをプレースホルダー値にリセットするためのクリアボタン（選択が行われると表示される）を使用できます。

https://select2.org/placeholders

14
Cristina Cristea
$('#ddlSelect').prepend('<option selected=""></option>').select2({placeholder: "Select Month"});
12
Versatile

これは私のために働いた：

$('#SelectListId').prepend('<option selected></option>').select2({
    placeholder: "Select Month",
    allowClear: true
});

このヘルプを願っています:)

4
Ignacio Franco

HTMLで次のように空のプレースホルダーを使用します。

<select class="select2" placeholder = "">
    <option value="1">red</option>
    <option value="2">blue</option>
</select>

スクリプトで次を使用します。

$(".select2").select2({
        placeholder: "Select a color",
        allowClear: true
    });
2
LipeTuga

次のような2つのレベルでhtmlコードを選択して、プレースホルダーを初期化できます。

<select class="form-control select2" style="width: 100%;" data-placeholder="Select a State">
   <option></option>
   <option>تهران</option>
   <option>مشهد</option>
   <option>اصفهان</option>
   <option>شیراز</option>
   <option>اهواز</option>
   <option>تبریز</option>
   <option>کرج</option>   
</select>

1.選択タグにデータプレースホルダー属性を設定2.選択タグの最初に空タグを設定

1
Omid Ahmadyani

私は次のことをしました：

var defaultOption = new Option();
defaultOption.selected = true;    
$(".js-select2").append(defaultOption);

私が使用する他のオプションについて：

var realOption = new Option("Option Value", "id");
realOption.selected = false;    
$(".js-select2").append(realOption);
1
admirm

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

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

また、スクリプトに以下のコードを記述します。select2jsのリンクがあることに留意してください。

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

すべての前に空の「オプション」を追加するsimplest方法。

<option></option>

例：

<select class="select2" lang="ru" tabindex="-1">
    <option></option>
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
</select>

必要な場合はjsコードも：

$(document).ready(function() {
    $(".select2").select2({
            placeholder: "Select a state",
            allowClear: true
        });
    });
}
0
denismart