Javascript / jQuery: Atur Nilai (Pilihan) dalam Pilihan ganda

100

Saya memiliki beberapa pilihan:

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

Saya memuat data dari database saya. Lalu saya punya string seperti ini:

var values="Test,Prof,Off";

Bagaimana cara mengatur Nilai ini di beberapa pilihan? Sudah mencoba mengubah string dalam array dan meletakkannya sebagai nilai dalam kelipatan, tetapi tidak berhasil ...! Bisakah seseorang membantu saya dengan ini? TERIMA KASIH!!!

Zwen2012
sumber

Jawaban:

133

Iterasi melalui loop menggunakan nilai dalam pemilih dinamis yang menggunakan pemilih atribut.

var values="Test,Prof,Off";
$.each(values.split(","), function(i,e){
    $("#strings option[value='" + e + "']").prop("selected", true);
});

Contoh Kerja http://jsfiddle.net/McddQ/1/

Kevin Bowersox
sumber
1
Itu keren, tapi bagaimana Anda mengatakan bahwa vlaues yang dipilih harus dipilih di "beberapa pilih" dengan id = string?
Zwen2012
@ user1824136 Luar biasa, Senang saya bisa membantu seseorang pagi ini!
Kevin Bowersox
1
Jika kita akan tetap bergantung pada jQuery, lebih suka ŁukaszW.pl $('#strings').val(values.split(',')). Tanpa jQuery, Plain Old Javascript milik ŁukaszW.pl document.getElementById('strings').value = ["Test", "Prof", "Off"]juga diselesaikan dalam satu baris
KyleMit
109

di jQuery:

$("#strings").val(["Test", "Prof", "Off"]);

atau dalam JavaScript murni:

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 melakukan abstraksi yang signifikan di sini.

ŁukaszW.pl
sumber
1
Ini bekerja sempurna untuk saya dan pilihan 'pilihan' saya ... harus menambahkan semua nilai sekaligus (seperti yang Anda katakan di atas)
Todd Vance
4
Hmm, javascript murni tidak berfungsi untuk saya di Chrome / mac atau FF / mac. Itu tidak berpengaruh pada apa yang sebenarnya dipilih, setidaknya apa yang muncul terpilih secara visual di browser.
Bill Keese
3
Ini berfungsi ketika saya melewatkan string, tetapi tidak ketika saya melewati array.
Ravi G
Memiliki masalah yang sama; ini hanya bekerja dengan nilai string, bukan array (menggunakan JS biasa, bukan jQuery).
jayp
1
Bagi mereka yang mengalami masalah dengan ini, Anda harus memastikan Anda memicu peristiwa 'perubahan' setelah menyetel nilai di JavaScript. Menggunakan jQuery ini akan menjadi $ ("# strings"). Val (["Test", "Prof", "Off"]). Trigger ('change');
Jon Wyatt
20

Cukup sediakan fungsi jQuery val dengan array nilai:

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

Dan untuk mendapatkan nilai yang dipilih dalam format yang sama:

values = $('#strings').val();
PostureOfLearning
sumber
8

Solusi JavaScript ES6 murni

  • Tangkap setiap opsi dengan querySelectorAllfungsi dan pisahkanvalues string.
  • Gunakan Array#forEachuntuk mengulangi setiap elemen darivalues larik.
  • Gunakan Array#finduntuk menemukan opsi yang cocok dengan nilai yang diberikan.
  • Setel selectedatributnya ke true.

Catatan : Array#frommengubah objek seperti larik menjadi larik dan kemudian Anda dapat menggunakan Array.prototypefungsi di atasnya, seperti temukan atau peta .

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>

pengguna yang baik
sumber
2

Pada dasarnya lakukan a values.split(',')dan kemudian lakukan loop melalui array yang dihasilkan dan atur Select.

kashipai
sumber
1

Solusi JavaScript ES5 murni

Untuk beberapa alasan Anda tidak menggunakan jQuery atau ES6? Ini mungkin membantu Anda:

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>

Mariano Desanze
sumber
0
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
Anggota con
sumber
0

ini adalah kesalahan dalam beberapa jawaban untuk replace |

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

koreksi ini benar tetapi | Pada akhirnya akan terlihat seperti ini \ |

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