在不重新加载的情况下，将“选定”值从另一个列表动态后缀到先前的“选定”列表

Question

Please see this image before reading

要求是动态更改multi-select列表，并为所选选项添加后缀。这些“后缀值”是来自其他单个选择列表的选定选项。

我正在以有序的方式在会话变量中保存这些选择

P94_DYNAMIC_ML ==> "Habib" : "Aiman"

P94_DYNAMIC_SL ==> "FAST 1" : "AL SAFEER 1"

期望这可以在客户端本身完成。

PS：我主要研究数据库，SQL和PLSQL。最近有机会参与Web开发。在Javascript和jquery中非常天真，并且无法在我的HTML中编写任何适当的代码。在这里寻求帮助，这样我就可以知道至少从哪里开始。此后，我会尽力而为

Answer 1

这是一些东西：

$("#x1-suffix").on("change", function () {
  $("#x1").text("x1 - " + $(this).val());
});
$("#x2-suffix").on("change", function () {
  $("#x2").text("x2 - " + $(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li id="x1">x1</li>
  <li id="x2">x2</li>
</ul>
<div>
  <label for="x1-suffix">x1 suffix : </label>
  <select name="x1_suffix" id="x1-suffix">
    <option value="empty">pick one</option>
    <option value="s1">s1</option>
    <option value="s2">s2</option>
    <option value="s3">s3</option>
  </select>
</div>
<div>
  <label for="x2-suffix">x2 suffix : </label>
  <select name="x2_suffix" id="x2-suffix">
    <option value="empty">pick one</option>
    <option value="s1">s1</option>
    <option value="s2">s2</option>
    <option value="s3">s3</option>
  </select>
</div>