web-dev-qa-db-ja.com

select2：プログラムでプレースホルダーを制御する

イベント時のselect2拡張コントロールのプレースホルダーを変更したいと思います。

だから私はこれを持っています...

<select id="myFoo" placeholder="Fight some foo...">

...次に強化されます：

init: function(){
   $('#myFoo').select2();
},

...これで正しいプレースホルダーができました。

しかし、イベントに反応してプレースホルダーをクリアしたいのですが...

someButtonPress: function(){
//   $('#myFoo').placeholder("");
//   $('#myFoo').attr('placeholder', "");
//   $('#myFoo').select2('placeholder',"");
//   $('#myFoo').select2({placeholder:""});
//   none of these work
}

これはとても基本的なようですが、私は困惑しています。

ドキュメントに何も見つかりません。私は間違った場所を見ていますか？

jqueryplaceholderjquery-select2
12
DaveC426913

更新

HTML _data-placeholder_属性を介してプレースホルダーを設定した場合は、内部オプションではなく、プレースホルダーを変更する必要があるため、 Fabian H。 が示唆するようになります。

_$select.attr("data-placeholder", "New placeholder text");
$select.data("select2").setPlaceholder();
_

または、そうでない場合は、内部オプション_select2.opts.placeholder_を使用します。

_var select2 = $select.data("select2");
select2.opts.placeholder = "New placeholder text";
select2.setPlaceholder();
_

もちろんこれは完璧ではありませんが、select2で生成されたHTMLをハッキングするよりもはるかに優れています。

  1. this.$select.data("select2")は内部select2オブジェクトを取得するため、そのプロパティとメソッドにアクセスできます（外部から使用するためにエクスポートされたものだけでなく）
  2. 次に、placeholder内部オプションを更新するか、関連するデータ属性を変更します
  3. 最後に、新しいプレースホラーを設定する内部メソッドsetPlaceholderをトリガーしています。

お役に立てば幸いです。

12
Brock

プレースホルダーを動的に変更する場合は、HTMLに設定しないでください

<select id="myFoo">

jQueryで設定する

$('#myFoo').select2({
   placeholder: "your placeholder"
});

次に、このように更新します

someButtonPress: function(){
$('#myFoo').select2({
    placeholder: "change your placeholder"
  });
}

それは私のために働きます、それが役立つことを願っています。

6
Ruchi Karnawan

Select2のプレースホルダーをリモートデータ（AJAX/JSONP）で更新するには、次のコードを使用します。

$input = $("input#e7");
$input.attr("data-placeholder", "New placeholder");
var select2 = $input.data("select2");
select2.setPlaceholder();

クレジット ブロックの応答 。

4
Fabian Horlacher

プレースホルダーを更新する別の方法は、select要素に「placeholder」属性を設定し、select2（）を再度呼び出すことです。

$('#IdForSelectElement').attr('placeholder', 'New Placeholder Text').select2();

初めてselect2にオプションを渡した場合は、それらを再度渡す必要があることを覚えておいてください（または、$。fn.select2.defaultsを使用してデフォルトオプションを設定するだけです）。

3
Noah Heldman

Select2 4.0.5 Standardを使用していますが、既存のソリューションが機能しないか、プレースホルダーの更新ごとにselect2を再作成する必要がありましたが、これは避けたかったのです。

それがハックであっても、私は新しい解決策を思いついた。 select2コンテナを保存して、後で簡単にアクセスできるようにします。プレースホルダーを更新する必要がある場合は、コンテナー内のプレースホルダー要素を見つけて、そのテキストを更新します。

var selectorSelect2 = $('#selector').data('select2').$container;
...
selectorSelect2.find('.select2-selection__placeholder').text('Updated Text 1');
...
selectorSelect2.find('.select2-selection__placeholder').text('Updated Text 2');
2
Gavin.Paolucci.Kleinow

オプションも動的に変更する場合は、プレースホルダーを有効にするために、追加の空のオプションをキューに入れる必要があります。例えば：

response.unshift({id: '', text: ''});
$('#elem).select2({placeholder: 'Select..', data: response});
0
Ghazi

動作は、使用しているSelect2のバージョン（v3.5.1を使用）によって異なると思いますが、プレースホルダーをオンデマンドで変更するには、少し異なるアプローチをとる必要がありました。私の場合、セレクターは別のセレクターの値に基づいて表示されるオプションを変更します。つまり、プレースホルダーは新しいデータセットで変更する必要があります。

これを機能させるには、HTML入力要素のプレースホルダーへの参照をすべて削除する必要がありました。

_<input type="text" class="form-control span10">
_

次に、Javascriptで、正しいオプションを使用して要素をロードするたびに、data()関数を介してプレースホルダーを更新する必要がありました。

_selector.data('placeholder', placeholder);
selector.select2({ data: new_data_set, tags: true });
_

それは今では毎回うまくいくようです。

0
Chip Roberson