반응형
Javascript / jQuery : 다중 선택에서 값 설정 (선택)
다중 선택이 있습니다.
<select name='strings' id="strings" multiple style="width:100px;">
<option value="Test">Test</option>
<option value="Prof">Prof</option>
<option value="Live">Live</option>
<option value="Off">Off</option>
<option value="On">On</option>
</select>
데이터베이스에서 데이터를로드합니다. 그런 다음 다음과 같은 문자열이 있습니다.
var values="Test,Prof,Off";
다중 선택에서이 값을 어떻게 설정할 수 있습니까? 이미 배열의 문자열을 변경하고 여러 값으로 넣으려고 시도했지만 작동하지 않습니다 ...! 누군가 나를 도와 줄 수 있습니까? 감사!!!
속성 선택기를 활용하는 동적 선택기의 값을 사용하여 루프를 반복합니다.
var values="Test,Prof,Off";
$.each(values.split(","), function(i,e){
$("#strings option[value='" + e + "']").prop("selected", true);
});
작업 예 http://jsfiddle.net/McddQ/1/
jQuery에서 :
$("#strings").val(["Test", "Prof", "Off"]);
또는 순수 JavaScript에서 :
var element = document.getElementById('strings');
var values = ["Test", "Prof", "Off"];
for (var i = 0; i < element.options.length; i++) {
element.options[i].selected = values.indexOf(element.options[i].value) >= 0;
}
jQuery는 여기서 중요한 추상화를 수행합니다.
값 배열과 함께 jQuery val 함수를 제공하십시오.
var values = "Test,Prof,Off";
$('#strings').val(values.split(','));
선택한 값을 동일한 형식으로 가져 오려면 다음을 수행하십시오.
values = $('#strings').val();
순수 JavaScript ES6 솔루션
querySelectorAll
함수로 모든 옵션을 잡고values
문자열을 분할 합니다.- 배열의
Array#forEach
모든 요소를 반복하는 데 사용 합니다values
. Array#find
주어진 값과 일치하는 옵션을 찾는 데 사용 합니다.selected
속성을로 설정하십시오true
.
참고 : 배열과 유사한 객체를 배열로Array#from
변환 한 다음 find 또는 map 과 같은 함수 를 사용할 수 있습니다 .Array.prototype
var values = "Test,Prof,Off",
options = Array.from(document.querySelectorAll('#strings option'));
values.split(',').forEach(function(v) {
options.find(c => c.value == v).selected = true;
});
<select name='strings' id="strings" multiple style="width:100px;">
<option value="Test">Test</option>
<option value="Prof">Prof</option>
<option value="Live">Live</option>
<option value="Off">Off</option>
<option value="On">On</option>
</select>
순수 JavaScript ES5 솔루션
어떤 이유로 jQuery 나 ES6를 사용하지 않습니까? 도움이 될 수 있습니다.
var values = "Test,Prof,Off";
var splitValues = values.split(',');
var multi = document.getElementById('strings');
multi.value = null; // Reset pre-selected options (just in case)
var multiLen = multi.options.length;
for (var i = 0; i < multiLen; i++) {
if (splitValues.indexOf(multi.options[i].value) >= 0) {
multi.options[i].selected = true;
}
}
<select name='strings' id="strings" multiple style="width:100px;">
<option value="Test">Test</option>
<option value="Prof">Prof</option>
<option value="Live">Live</option>
<option value="Off">Off</option>
<option value="On" selected>On</option>
</select>
기본적으로 a를 수행 한 values.split(',')
다음 결과 배열을 반복하고 선택을 설정하십시오.
var groups = ["Test", "Prof","Off"];
$('#fruits option').filter(function() {
return groups.indexOf($(this).text()) > -1; //Options text exists in array
}).prop('selected', true); //Set selected
이것은 교체에 대한 일부 답변의 오류입니다.
var mystring = "this|is|a|test";
mystring = mystring.replace(/|/g, "");
alert(mystring);
이 수정은 정확하지만 | 결국 다음과 같이 보일 것입니다. \ |
var mystring = "this|is|a|test";
mystring = mystring.replace(/\|/g, "");
alert(mystring);
반응형
'Programing' 카테고리의 다른 글
PHP에서 HttpOnly 쿠키 사용을 어떻게 설정합니까? (0) | 2020.09.06 |
---|---|
문자열 var [duplicate]로 사용자 지정 개체 속성 가져 오기 (0) | 2020.09.06 |
Swift에서 술어 사용 (0) | 2020.09.06 |
프로그래밍 방식으로 컨테이너보기를 추가하는 방법 (0) | 2020.09.06 |
sed를 사용하여 줄의 처음 'N'문자를 어떻게 인쇄합니까? (0) | 2020.09.06 |