http://ivaynberg.github.io/select2/ のselect2jqueryプラグインを使用しています。
私は次のコードを使用しています。
$(document).ready(function () {
$("#e6").select2({
placeholder: "Search for a movie",
minimumInputLength: 1,
ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json",
dataType: 'jsonp',
quietMillis: 1000,
data: function (term, page) {
return {
q: term, // search term
page_limit: 10,
apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use so this example keeps working
};
},
results: function (data, page) { // parse the results into the format expected by Select2.
// since we are using custom formatting functions we do not need to alter remote JSON data
return { results: data.movies };
}
},
initSelection: function (element, callback) {
var id = 9942;//$(element).val();
alert('initSelection');
if (id !== "") {
$.ajax("http://api.rottentomatoes.com/api/public/v1.0/movies/" + id + ".json", {
data: {
apikey: "ju6z9mjyajq2djue3gbvv26t"
},
dataType: "jsonp"
}).done(function (data) { callback(data); });
}
},
formatResult: movieFormatResult, // omitted for brevity, see the source of this page
formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page
dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
});
});
$(document).ready(function () {
$("#e6").on("select2-selecting", function (e) {
var v = 10;
alert("selecting val=" + e.val + " choice=" + JSON.stringify(e.choice));
var id = document.getElementById('<%= savebtn.ClientID %>');
id.value = e.val;
id.click();
});
});
問題:何らかの理由で、initSelectionが呼び出されず、このため、ポストバック間でテキストボックスの値を設定できません。
http://ivaynberg.github.io/select2/ サイトからのリモートデータの読み込みの例を使用しています。
documentation initSelectionを調べたところ、「この関数は、処理する初期入力がある場合にのみ呼び出されます」と表示されますが、そうではありません。正確に何を意味するのかを確認してください。
私は何か間違ったことをしていますか?助けてください
初期値を指定する必要があります。
<input ... value="192" ... />
または
$('#e6').select2('val', 192);
複数の値の場合、次のいずれかです。
<input ... value="192,193" ... />
または
$('#e6').select2('val', [192,193]);
JSFiddle を参照してください。
デフォルトで値を使用したくない場合は、このように簡単に行うことができます。
_$(document).ready(function () {
$("#e6").select2({
...
},
initSelection: function (element, callback) {
...
},
formatResult: movieFormatResult, // omitted for brevity, see the source of this page
formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page
dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
}).select2('val', []);
});
_
宣言の最後にselect2('val', []);
を追加すると、この問題が解決します。
-制御されていない場合-initalvalueがdbに保存されるので(コーヒースクリプトで)、これは私がより複雑な状況で行うことです
if $("#categories").val().length is 0
$("#categories").val "initialValue"
$("#categories").select2
closeOnSelect:false
containerCssClass: "select2-default"
formatNoMatches: ->
I18n.t "shared.navbar.no_matches_found"
formatInputTooShort: (input, min) ->
I18n.t("shared.navbar.please_select") + " " + (min - input.length) + " " + I18n.t("shared.navbar.more_characters")
formatSelectionTooBig: (limit) ->
I18n.t("shared.navbar.you_can_only_select") + " " + limit + " " + I18n.t("shared.navbar.item") + ((if limit is 1 then "" else "s"))
formatLoadMore: (pageNumber) ->
I18n.t "shared.navbar.loading_more_results"
formatSearching: ->
I18n.t "shared.navbar.searching"
minimumInputLength: 3
width: "100%"
multiple: true
ajax:
url: "/categories/list_styles"
dataType: "json"
quietMillis: 100
data: (term, page) ->
q: term
page_limit: 10
page: page
results: (data) ->
hashtable = {}
results = []
$.each data, (index, item) ->
if hashtable[item.parent] is `undefined`
hashtable[item.parent] =
text: item.parent
children: []
results.Push hashtable[item.parent]
hashtable[item.parent].children.Push
id: item._id
text: item.title
results: results
initSelection: (element, callback) ->
data1 = []
if element.val() is "initialValue"
element.val('')
jQuery(element.val().split(",")).each ->
$.ajax
type: "get"
url: "/providers/list_categories"
async: false
dataType: "json"
data: { id: $("#provider_id").val(), selected: $("#categories").val().split(",") }
success: (category) ->
$.each category, (i, obj) ->
data1.Push
id: @_id
text: @title
callback data1
$.each $(".select2-container"), (i, n) ->
$(n).next().show().fadeTo(0, 0).height("0px").css "left", "auto" # make the original select visible for validation engine and hidden for us
$(n).prepend $(n).next()
$(n).delay(500).queue ->
$(this).removeClass "validate[required]" #remove the class name from select2 container(div), so that validation engine dose not validate it
$(this).dequeue()
これを使って:
これで以前のオプション選択オプションを削除します:
arr = json.filter(function( obj ) {
return arrSelectedValues.indexOf(obj.foo) == -1;
});
選択した新しい要素を作成します。
option = document.createElement('option');
option.value = 'foo';
option.innerHTML = 'foo';
option.selected = true;
document.getElementById('selectFoobares').appendChild(option);
最善の方法ではありませんが、機能します