Javascript/jQuery : 다중 선택에서 값 설정(Selection)

Javascript/jQuery : 다중 선택에서 값 설정(Selection)

여러 가지를 선택할 수 있습니다.

<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"]);

또는 순수 자바스크립트로:

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는 여기서 중요한 추상화를 수행합니다.

jQueryval 함수에 값 배열을 제공하면 됩니다.

var values = "Test,Prof,Off";
$('#strings').val(values.split(','));

그리고 선택한 값을 동일한 형식으로 가져오려면:

values = $('#strings').val();

순수 자바스크립트 ES6 솔루션

• 모든 옵션을 선택할 수 있습니다.querySelectorAll기능하고 나누다values끈을 매다
• 의 모든 요소를 반복하는 데 사용합니다.values배열해 놓은
• 주어진 값과 일치하는 옵션을 찾습니다.
• 셋잇잇잇selected에 귀속시키다true.

참고: 배열과 같은 개체를 배열로 변환한 다음 다음 사용할 수 있습니다.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>

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

기본적으로.values.split(',')그런 다음 결과 배열을 루프하고 Select(선택)을 설정합니다.

순수 자바스크립트 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>

사용 방법:

$('#demo').multiselect('select', value);

여러 값의 경우 루프를 사용합니다. 더 많은 속성을 보려면 이 페이지가 매우 좋습니다.

교체에 대한 일부 답변에 오류가 있습니다.

var mystring = "this|is|a|test";
mystring = mystring.replace(/|/g, "");
alert(mystring);

이 수정은 맞지만 결국은 이렇게 보여야 합니다.

var mystring = "this|is|a|test";
mystring = mystring.replace(/\|/g, "");
alert(mystring);

언급URL : https://stackoverflow.com/questions/16582901/javascript-jquery-set-values-selection-in-a-multiple-select