ฉันมีหลายตัวเลือก:

<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();

โซลูชัน Pure JavaScript ES6

• จับทุกตัวเลือกด้วยquerySelectorAllฟังก์ชันและแยกvaluesสตริง
• ใช้Array#forEachเพื่อวนซ้ำทุกองค์ประกอบจากvaluesอาร์เรย์
• ใช้Array#findเพื่อค้นหาตัวเลือกที่ตรงกับค่าที่กำหนด
• ตั้งค่าของแอตทริบิวต์selectedtrue

หมายเหตุ : Array#fromแปลงอาร์เรย์เหมือนวัตถุเป็นอาร์เรย์และจากนั้นคุณสามารถที่จะใช้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>

โดยทั่วไปทำvalues.split(',')แล้ววนลูปผ่านอาร์เรย์ผลลัพธ์และตั้งค่า Select

โซลูชัน Pure 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>

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