预加载多选列表

Question

所以我在网页上有一个表单，它是一个多选选项输入，例如。

<option name="testData" multiple="multiple">
  <select value="1">Option 1</select>
  <select value="2">Option 2</select>
  <select value="3">Option 3</select>
  <select value="4">Option 4</select>
  <select value="5">Option 5</select>
 </option>

提交表单后，选定的选项将存储在一个数组中（例如 1、2、3）

问题是，如果我重新访问该页面，我希望将数据拆分回单独的值，并确保它们之前是否被选中，它们会再次被选中。

所以在这种情况下，值 1、2、3 已经在选择菜单中被选中。

信息存储在数据库中，并且可以正确提取。我要问的是如何取值（1、2、3 等）并将每个值标识为选项列表中的选定选项。然后用户可以根据需要进行修改。

如果可能的话，这可以用 jquery 来完成吗？ Javascript 也可以。

如果这需要更多解释，请告诉我，我会尽力回答任何问题

提前致谢

Answer 1

您可以做的是将所选选项的数组存储到会话存储中（如果您想避免 AJAX 调用，它将使您的脚本更快）

// When your user clicks on the submit button
$( "#id_of_your_submit_btn" ).click(function() {
  // store the selected options into the sessionStorage
  sessionStorage.setItem('my_array_of_selected_values', array_of_selected_options);
});

然后，当您的页面重新加载时，您可以检查是否设置了此 sessionStorage，然后动态选择先前选择的选项（如 Alexandru 建议的那样）

$( document ).ready(function() {
    console.log( "ready!" );
    var selected_options = sessionStorage.getItem('my_array_of_selected_values');
    if(selected_options) {
       // if something is set into this sessionStorage variable
       // we select the options dynamically
       $("[name='testData']").val(selected_options);
    }

});

NB：检查目标浏览器是否支持https://developer.mozilla.org/fr/docs/Web/API/Window/sessionStorage

Answer 2

请试试这个，

$("[name='testData']").val([1,2,3]);

或

$("select").val([1,2,3]);