반응형
jquery select2의 선택한 값을 설정하는 방법은 무엇입니까?
이것은 select2 버전 4 이전의 코드에 속합니다.
select2ajax에서 데이터를 가져 오는 간단한 코드가 있습니다.
$("#programid").select2({
placeholder: "Select a Program",
allowClear: true,
minimumInputLength: 3,
ajax: {
url: "ajax.php",
dataType: 'json',
quietMillis: 200,
data: function (term, page) {
return {
term: term, //search term
flag: 'selectprogram',
page: page // page number
};
},
results: function (data) {
return {results: data};
}
},
dropdownCssClass: "bigdrop",
escapeMarkup: function (m) { return m; }
});
이 코드는 작동하지만 편집 모드에있는 것처럼 값을 설정해야합니다. 사용자가 처음 값을 선택하면 값이 저장되고 해당 값을 편집해야 할 때 select2이전에 선택한 값을 선택하기 위해 동일한 선택 메뉴 ( )에 나타나야 하지만 방법을 찾을 수 없습니다.
최신 정보:
HTML 코드 :
<input type="hidden" name="programid" id="programid" class="width-500 validate[required]">
Select2 프로그래밍 방식 액세스 는 이것과 함께 작동하지 않습니다.
Select2 구성 요소의 "선택된"값을 동적으로 설정하려면 :
$('#inputID').select2('data', {id: 100, a_key: 'Lorem Ipsum'});
두 번째 매개 변수는 예상 값이있는 객체입니다.
최신 정보:
이것은 작동합니다. 새로운 select2에서 "a_key" 는 표준 select2 객체의 "text" 라는 점에 주목하고 싶었습니다 . 그래서:{id: 100, text: 'Lorem Ipsum'}
예:
$('#all_contacts').select2('data', {id: '123', text: 'res_data.primary_email'});
@NoobishPro 덕분에
SELECT2 <V4
1 단계 : HTML
<input name="mySelect2" type="hidden" id="mySelect2">
2 단계 : Select2 인스턴스 만들기
$("#mySelect2").select2({
placeholder: "My Select 2",
multiple: false,
minimumInputLength: 1,
ajax: {
url: "/elements/all",
dataType: 'json',
quietMillis: 250,
data: function(term, page) {
return {
q: term,
};
},
results: function(data, page) {
return {results: data};
},
cache: true
},
formatResult: function(element){
return element.text + ' (' + element.id + ')';
},
formatSelection: function(element){
return element.text + ' (' + element.id + ')';
},
escapeMarkup: function(m) {
return m;
}
});
3 단계 : 원하는 값 설정
$("#mySelect2").select2('data', { id:"elementID", text: "Hello!"});
AJAX없이 select2 를 사용 하면 다음과 같이 할 수 있습니다.
<select name="mySelect2" id="mySelect2">
<option value="0">One</option>
<option value="1">Two</option>
<option value="2">Three</option>
</select>
/* //////////// "One" will be the selected option */
$('[name=mySelect2]').val("0");
다음과 같이 할 수도 있습니다.
$("#mySelect2").select2("val", "0");
SELECT2 V4
들어 V4 선택 2 직접 옵션을 추가 할 수 있습니다 / 다음과 같이 S :
<select id="myMultipleSelect2" multiple="" name="myMultipleSelect2[]">
<option value="TheID" selected="selected">The text</option>
</select>
또는 JQuery를 사용하여 :
var $newOption = $("<option selected='selected'></option>").val("TheID").text("The text")
$("#myMultipleSelect2").append($newOption).trigger('change');
다른 예
$("#myMultipleSelect2").val(5).trigger('change');
HTML :
<select id="lang" >
<option value="php">php</option>
<option value="asp">asp</option>
<option value="java">java</option>
</select>
자바 스크립트 :
$("#lang").select2().select2('val','asp');
또한 내가 시도한 것처럼 select2에서 ajax를 사용할 때 select2에서 새 값을 설정 하는 프로그래밍 방식 제어 방법이 작동하지 않습니다! 이제 문제를 해결하기 위해 다음 코드를 작성합니다.
$('#sel')
.empty() //empty select
.append($("<option/>") //add option tag in select
.val("20") //set value for option to post it
.text("nabi")) //set a text for show in select
.val("20") //select option of select2
.trigger("change"); //apply to select2
여기 링크에서 전체 샘플 코드를 테스트 할 수 있습니다. https://jsfiddle.net/NabiKAZ/2g1qq26v/32/
이 샘플 코드에는 ajax select2가 있으며 버튼으로 새 값을 설정할 수 있습니다.
$("#btn").click(function() {
$('#sel')
.empty() //empty select
.append($("<option/>") //add option tag in select
.val("20") //set value for option to post it
.text("nabi")) //set a text for show in select
.val("20") //select option of select2
.trigger("change"); //apply to select2
});
$("#sel").select2({
ajax: {
url: "https://api.github.com/search/repositories",
dataType: 'json',
delay: 250,
data: function(params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function(data, params) {
// parse the results into the format expected by Select2
// since we are using custom formatting functions we do not need to
// alter the remote JSON data, except to indicate that infinite
// scrolling can be used
params.page = params.page || 1;
return {
results: data.items,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true
},
escapeMarkup: function(markup) {
return markup;
}, // let our custom formatter work
minimumInputLength: 1,
templateResult: formatRepo, // omitted for brevity, see the source of this page
templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
});
function formatRepo(repo) {
if (repo.loading) return repo.text;
var markup = "<div class='select2-result-repository clearfix'>" +
"<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
"<div class='select2-result-repository__meta'>" +
"<div class='select2-result-repository__title'>" + repo.full_name + "</div>";
if (repo.description) {
markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
}
markup += "<div class='select2-result-repository__statistics'>" +
"<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" +
"<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" +
"<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" +
"</div>" +
"</div></div>";
return markup;
}
function formatRepoSelection(repo) {
return repo.full_name || repo.text;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://select2.org/assets/a7be624d756ba99faa354e455aed250d.css">
<select id="sel" multiple="multiple" class="col-xs-5">
</select>
<button id="btn">Set Default</button>var $option = $("<option selected></option>").val('1').text("Pick me");
$('#select_id').append($option).trigger('change');
이 추가를 시도한 다음 선택하십시오. AJAX 호출시 옵션을 복제하지 않습니다.
현재 버전에서 select2-v4.0.1 다음과 같이 값을 설정할 수 있습니다.
var $example = $('.js-example-programmatic').select2();
$(".js-programmatic-set-val").on("click", function () { $example.val("CA").trigger("change"); });
// Option 2 if you can't trigger the change event.
var $exampleDestroy = $('.js-example-programmatic-destroy').select2();
$(".js-programmatic-set-val").on("click", function () { $exampleDestroy.val("CA").select2('destroy').select2(); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
using "trigger(change)"
<select class="js-example-programmatic">
<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>
<optgroup label="Mountain Time Zone">
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
</optgroup>
<optgroup label="Central Time Zone">
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="IL">Illinois</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="OK">Oklahoma</option>
<option value="SD">South Dakota</option>
<option value="TX">Texas</option>
<option value="TN">Tennessee</option>
<option value="WI">Wisconsin</option>
</optgroup>
<optgroup label="Eastern Time Zone">
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="IN">Indiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="OH">Ohio</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</optgroup>
</select>
using destroy:
<select class="js-example-programmatic">
<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>
<optgroup label="Mountain Time Zone">
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
</optgroup>
<optgroup label="Central Time Zone">
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="IL">Illinois</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="OK">Oklahoma</option>
<option value="SD">South Dakota</option>
<option value="TX">Texas</option>
<option value="TN">Tennessee</option>
<option value="WI">Wisconsin</option>
</optgroup>
<optgroup label="Eastern Time Zone">
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="IN">Indiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="OH">Ohio</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</optgroup>
</select>
<button class="js-programmatic-set-val">set value</button>나는 이것을했다-
$("#drpServices").select2().val("0").trigger("change");
Ajax의 경우 $(".select2").val("").trigger("change"). 그러면 문제가 해결 될 것입니다.
initSelection기능 이 필요하다고 생각합니다
$("#programid").select2({
placeholder: "Select a Program",
allowClear: true,
minimumInputLength: 3,
ajax: {
url: "ajax.php",
dataType: 'json',
quietMillis: 200,
data: function (term, page) {
return {
term: term, //search term
flag: 'selectprogram',
page: page // page number
};
},
results: function (data) {
return {results: data};
}
},
initSelection: function (element, callback) {
var id = $(element).val();
if (id !== "") {
$.ajax("ajax.php/get_where", {
data: {programid: id},
dataType: "json"
}).done(function (data) {
$.each(data, function (i, value) {
callback({"text": value.text, "id": value.id});
});
;
});
}
},
dropdownCssClass: "bigdrop",
escapeMarkup: function (m) { return m; }
});
HTML
<select id="lang" >
<option value="php">php</option>
<option value="asp">asp</option>
<option value="java">java</option>
</select>
JS
$("#lang").select2().val('php').trigger('change.select2');
출처 : https://select2.github.io/options.html
에서 선택 2 V.4
사용하다 $('selector').select2().val(value_to_select).trigger('change');
작동해야한다고 생각합니다
Phan의 답변이 저에게 효과적이었습니다.
$('#inputID').select2('data', {id: 100, a_key: 'Lorem Ipsum'});
그러나 변경 사항을 추가하면 이벤트가 발생합니다.
$('#inputID').select2('data', {id: 100, a_key: 'Lorem Ipsum'}).change();
이 코드를 사용할 수 있습니다.
$("#programid").val(["number:2", "number:3"]).trigger("change");
여기서 "number : 2"의 2와 "number : 3"의 3은 객체 배열의 id 필드입니다.
select2 ajax 드롭 다운에서 요소를 미리 설정하기 위해 이와 같은 작업을 수행했습니다.
//preset element values
$(id).val(topics);
//topics is an array of format [{"id":"","text":""}, .....]
setTimeout(function(){
ajaxTopicDropdown(id,
2,location.origin+"/api for gettings topics/",
"Pick a topic", true, 5);
},1);
// ajaxtopicDropdown is dry fucntion to get topics for diffrent element and url
다음을 사용해야합니다.
var autocompleteIds= $("#EventId");
autocompleteIds.empty().append('<option value="Id">Text</option>').val("Id").trigger('change');
// For set multi selected values
var data = [];//Array Ids
var option = [];//Array options of Ids above
autocompleteIds.empty().append(option).val(data).trigger('change');
// Callback handler that will be called on success
request.done(function (response, textStatus, jqXHR) {
// append the new option
$("#EventId").append('<option value="' + response.id + '">' + response.text + '</option>');
// get a list of selected values if any - or create an empty array
var selectedValues = $("#EventId").val();
if (selectedValues == null) {
selectedValues = new Array();
}
selectedValues.push(response.id); // add the newly created option to the list of selected items
$("#EventId").val(selectedValues).trigger('change'); // have select2 do it's thing
});
입력 상자를 사용하는 경우 값이 "true"인 "multiple"속성을 설정해야합니다. 예를 들면
<script>
$(document).ready(function () {
var arr = [{ id: 100, text: 'Lorem Ipsum 1' },
{ id: 200, text: 'Lorem Ipsum 2'}];
$('#inputID').select2({
data: arr,
width: 200,
multiple: true
});
});
</script>
에는 원격 데이터로드 select2 < version4옵션 initSelection()이 있으며이를 통해 편집 모드에서와 같이 입력에 대한 초기 값을 설정할 수 있습니다.
$("#e6").select2({
placeholder: "Search for a repository",
minimumInputLength: 1,
ajax: {
// instead of writing the function to execute the request we use Select2's convenient helper
url: "https://api.github.com/search/repositories",
dataType: 'json',
quietMillis: 250,
data: function (term, page) {
return {
q: term, // search term
};
},
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 the remote JSON data
return { results: data.items };
},
cache: true
},
initSelection: function(element, callback) {
// the input tag has a value attribute preloaded that points to a preselected repository's id
// this function resolves that id attribute to an object that select2 can render
// using its formatResult renderer - that way the repository name is shown preselected
var id = $(element).val();
if (id !== "") {
$.ajax("https://api.github.com/repositories/" + id, {
dataType: "json"
}).done(function(data) { callback(data); });
}
},
formatResult: repoFormatResult, // omitted for brevity, see the source of this page
formatSelection: repoFormatSelection, // 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-3.5.3
때때로, select2()먼저로드 될 것이고, 이로 인해 컨트롤이 이전에 선택한 값을 올바르게 표시하지 않게됩니다. 몇 초 동안 지연하면이 문제를 해결할 수 있습니다.
setTimeout(function(){
$('#costcentreid').select2();
},3000);
나와 같은 문제를 생각해 낸 다른 사람에게 추가하기 위해.
동적으로로드 된 옵션 (AJAX에서)의 선택된 옵션을 설정하려고 시도했으며 일부 논리에 따라 선택한 옵션 중 하나를 설정하려고했습니다.
내 문제는 이름과 일치하는 값이 아니라 값과 일치해야하는 ID를 기반으로 선택한 옵션을 설정하지 않았기 때문에 발생했습니다!
좋고 쉬운 :
document.getElementById("select2-id_city-container").innerHTML = "Your Text Here";
그리고 id_city선택의 ID로 변경 합니다.
편집 : 글렌의 코멘트 후에 나는 그것이 왜 그리고 어떻게 작동했는지 설명해야한다는 것을 깨달았습니다.
나는 select2내 양식에 대해 정말 멋지게 작업했습니다. 내가 할 수 없었던 유일한 것은 편집 할 때 현재 선택된 값을 표시하는 것뿐이었습니다. 타사 API를 검색하여 새 레코드를 저장하고 이전 레코드를 편집했습니다. 잠시 후 사용자가 필드를 변경하지 않으면 아무 일도 일어나지 않기 때문에 값을 올바르게 설정할 필요가 없다는 것을 깨달았습니다. 문제가있는 많은 사람들을 검색하고 찾아 본 끝에 순수 자바 스크립트로 만들기로 결정했습니다. 그것은 효과가 있었고 누군가를 돕기 위해 게시했습니다. 나는 또한 그것에 대한 타이머를 설정하는 것이 좋습니다.
다음과 같은 여러 값의 경우 :
$("#HouseIds").select2("val", @Newtonsoft.Json.JsonConvert.SerializeObject(Model.HouseIds));
다음과 같이 번역됩니다.
$("#HouseIds").select2("val", [35293,49525]);
값을 설정하고 변경 이벤트를 즉시 트리거하십시오.
$('#selectteam').val([183,182]).trigger('change');
이것은 누군가가 편집을 위해 데이터를로드하는 동안 AJAX에서 select2 데이터를로드하는 데 도움이 될 수 있습니다 ( 단일 또는 다중 선택에 적용 가능 ) :
내 양식 / 모델로드 중 :
$.ajax({
type: "POST",
...
success: function (data) {
selectCountries(fixedEncodeURI(data.countries));
}
Select2에 대한 데이터를 선택하려면 호출 :
var countrySelect = $('.select_country');
function selectCountries(countries)
{
if (countries) {
$.ajax({
type: 'GET',
url: "/regions/getCountries/",
data: $.param({ 'idsSelected': countries }, true),
}).then(function (data) {
// create the option and append to Select2
$.each(data, function (index, value) {
var option = new Option(value.text, value.id, true, true);
countrySelect.append(option).trigger('change');
console.log(option);
});
// manually trigger the `select2:select` event
countrySelect.trigger({
type: 'select2:select',
params: {
data: data
}
});
});
}
}
인코딩에 문제가있는 경우 요구 사항으로 변경할 수 있습니다.
function fixedEncodeURI(str) {
return encodeURI(str).replace(/%5B/g, '[').replace(/%5D/g, ']').replace(/%22/g,"");
}
이 코드를 사용할 수 있습니다.
$('#country').select2("val", "Pakistan").trigger('change');
파키스탄 대신 원하는 값을 입력하십시오.
희망이 작동합니다 :)
참고 URL : https://stackoverflow.com/questions/25187926/how-to-set-selected-value-of-jquery-select2
반응형
'developer tip' 카테고리의 다른 글
| 인텔이 프로세서에서 내부 RISC 코어를 숨기는 이유는 무엇입니까? (0) | 2020.09.19 |
|---|---|
| Python opencv2 (cv2) 래퍼가 이미지 크기를 얻습니까? (0) | 2020.09.18 |
| IntelliJ IDEA 내에서 SBT를 사용하여 Uber JAR (Fat JAR)을 빌드하는 방법은 무엇입니까? (0) | 2020.09.18 |
| Spring MVC에서 현재 URL을 얻는 가장 좋은 방법은 무엇입니까? (0) | 2020.09.18 |
| 중재자 대 관찰자 객체 지향 디자인 패턴 (0) | 2020.09.18 |