javascript - 构建在选择列表中单击的项目数组并将值分配给元素

Question

我已经具有构建数组的功能，但我不知道如何将数组中的值分配给另一个列表

var subjectAreas = [];

$("#subjectlist")
     .change(function () {
            $("select option:selected").each(function () {
                $('#overview').append("<tr id='" + this.value + "'><td>" + 
                $(this).text() + "</td><td id=" + this.value + ">" "</td> 
                </tr>");
                subjectAreas.push(this.value);    

                //below is the part I don't understand
                $("#SubjectAreasOfProgramme")
                .val(subjectAreas.values.arguments);
            });
     })
.trigger("change");

// below has the id: SubjectAreasOfProgramme and the behind variable is of type List
<input type="hidden" asp-for="SubjectAreasOfProgramme" />

Answer 1

您可以使用 JSON.stringify 将数组转换为字符串并将最新值分配给隐藏输入，您可能忘记了为隐藏输入提供 id。您可以通过选择选项、输入文本并单击按钮来测试以下代码片段:

var subjectAreas = [];

$("#subjectlist")
  .change(function() {
    $("select option:selected").each(function() {
      $('#overview').append("<tr id='" + this.value + "'><td>" +
        $(this).text() + "</td><td id=" + this.value + ">" + "</td>  </tr>");
      subjectAreas.push(this.value);
      $("#SubjectAreasOfProgramme").val(JSON.stringify(subjectAreas));
    });
  })
  .trigger("change");

function logValue() {
  console.log($("#SubjectAreasOfProgramme").val());
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="hidden" asp-for="SubjectAreasOfProgramme" id="SubjectAreasOfProgramme" />
<select multiple style="width: 50px;">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
</select>
<input id="subjectlist" />
<button onclick="logValue();">get SubjectAreasOfProgramme value</button>
<table id="overview">
</table>