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

预加载多个选择列表

2 个答案: