0

私はselect2 v4<select>を使用しています。ここでは、select2を ajax メソッドを使用して要素に接続しています。ロード時に選択した値をデフォルトにできないことを除いて、すべて正常に動作します。

例のページには次のように書かれています。

デフォルトの選択を提供する必要がある場合は、表示する値とテキストを含む各選択のオプションを含めるだけです。

このコードでは、値をデフォルトで「foo」にします。

マークアップ:

<label class="input">
  <select aria-hidden="true" tabindex="-1" 
    class="form-control user-school-select select2-hidden-accessible" 
    name="user[school_id]" id="user_school_id">
    <option selected="selected" value="1">foo</option>
  </select>
  <span style="width: 372px;" dir="ltr" 
    class="select2 select2-container select2-container--default">
    <span class="selection">
      <span aria-labelledby="select2-user_school_id-container" 
        tabindex="0" class="select2-selection select2-selection--single" 
        role="combobox" aria-autocomplete="list" aria-haspopup="true" 
        aria-expanded="false">
          <span title="foo" id="select2-user_school_id-container" 
            class="select2-selection__rendered"></span>
          <span class="select2-selection__arrow" role="presentation">
            <b role="presentation"></b></span></span></span>
 <span class="dropdown-wrapper" aria-hidden="true"></span></span></span>
</label>

このマークアップは、Rails ビュー (users/edit.html.erb) によって生成されます。

<%= label_tag nil, nil, :class => "input" do %>
  <% if @user.school_id %>
    <%= f.select :school_id, 
                 options_for_select({ @user.user_school => @user.school_id }, @user.school_id ), {}, 
                 { class: "form-control user-school-select" } %>
  <% else %>
    <%= f.select :school_id, {}, {},
                 {class: "form-control user-school-select"} %>
  <% end %>
<% end %>

users.js.erb の JavaScript:

$(document).ready(function() {
  $(".user-school-select").select2({
    ajax: {
        url: "/schools",
        dataType: 'json',
        delay: 250,
        data: function (params) {
            return {
                q: params.term, // search term
                page: params.page
            };
        },
        processResults: function (data, page) {
            return {
                results: data
            };
        },
        cache: true
    },
    escapeMarkup: function (markup) { return markup; }, 
    minimumInputLength: 2,
    templateResult: formatSchool,
    templateSelection: formatSchoolSelection
  }); 
});  

function formatSchool (school) {
  var markup = '<div class="clearfix">' +
        '<div class="col-sm-1">' +
        (school.logo_url ? '<img src="' + school.logo_url + '" style="max-width: 100%" />' : "") +
        '</div>' +
        '<div class="col-sm-10">' +
        '<div class="clearfix">' +
        '<div class="col-sm-9">' + school.name + '</div>' +
        '</div>';
  markup += '</div></div>';
  return markup;
} 

function formatSchoolSelection (school) {
  return school.name;
}

select2 で生成されたマークアップで、スパンにはtitle値が設定された属性があるが、実際のスパン テキストは空であることがわかります。

<span class="selection">
  <span aria-labelledby="select2-user_school_id-container" tabindex="0" 
    class="select2-selection select2-selection--single" 
    role="combobox" aria-autocomplete="list" aria-haspopup="true" 
    aria-expanded="false">
    <span title="foo" id="select2-user_school_id-container" 
      class="select2-selection__rendered"></span>
    <span class="select2-selection__arrow" role="presentation">
      <b role="presentation"></b></span></span></span>

initSelection私はまた、役に立たない他の非推奨の方法を試しました：

$(".user-school-select").select2({
    ajax: {
        url: "/schools",
        dataType: 'json',
        delay: 250,
        data: function (params) {
            return {
                q: params.term, // search term
                page: params.page
            };
        },
        processResults: function (data, page) {
            return {
                results: data
            };
        },
        cache: true
    },
    escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
    minimumInputLength: 2,
    templateResult: formatSchool,
    templateSelection: formatSchoolSelection,
    initSelection : function (element, callback) {
        var data = {"id":"1","text":'foo'};
        callback(data);
    }
});
$(".user-school-select").select2("data", {"id": 1, "text": "foo"});

私はまた、役に立たなかった後にこの行を追加しようとしました:

$(".user-school-select").select2("val", "1");

同様の質問に対する多くの回答を見てきましたが、私のシナリオではうまくいきません。select2 v4を使用しているためだと思います。私が読んだ他のほとんどの回答は、 -initSelectionと組み合わせて使用​​する必要があると言っていますvalが、これらの他の例では常に.<input>ではなく要素を使用してい<select>ます。減価償却された最新のドキュメントに注意してください。initSelection代わりにDataAdaptercurrentのメソッドを使用する必要がありますが、これを上記のコードにどのように適用するかわかりませんか?

4

2 に答える 2

2

正しい答えではありませんが、回避策を適用する必要がありました-templateSelectionメソッドを削除することで問題は解決しました。私は templateSelection メソッドの利点が欲しいので、良い解決策ではありません。とりあえず無しで済ませます。 

$(document).ready(function() {
  $(".user-school-select").select2({
    ajax: {
        url: "/schools",
        dataType: 'json',
        delay: 250,
        data: function (params) {
            return {
                q: params.term, // search term
                page: params.page
            };
        },
        processResults: function (data, page) {
            return {
                results: data
            };
        },
        cache: true
    },
    escapeMarkup: function (markup) { return markup; }, 
    minimumInputLength: 2,
    templateResult: formatSchool/*,
    templateSelection: formatSchoolSelection*/
  }); 
});
于 2015-08-21T09:30:50.740 に答える
0

以下のように値を設定したら、トリガーchangeしてみてください。select2

$(".user-school-select").select2("val", "1").trigger('change');
于 2015-08-21T07:47:37.630 に答える