javascript - 如何在单个变量下为下拉列表设置多个值？

Question

我有一个简单的表单，被选为 jquery 库。我要求输入值位于单个变量 idb 中，因为它们稍后会在该变量的正则表达式中使用。目前它的工作方式是将它们放置在单独的变量 idb 中，如下所示:&idb=02&idb=03&idb=04 我希望它们看起来像这样:idb=05%2C+06%2C+07。

这是我的代码:

<form action="./index.html" method="GET">
Device Id: <select data-placeholder="Input here device id" multiple class="chosen-select" name="idb">
        <option value=""></option>
        <option>01</option>
        <option>02</option>
        <option>03</option>
        <option>04</option>
        <option>05</option>
        <option>06</option>
        <option>07</option>
        <option>08</option>
      </select>
  <input type="submit" value="Submit"/>
  </form>

    <script type="text/javascript">
    $('.chosen-select').chosen({}).change( function(obj, result) {
        console.debug("changed: %o", arguments);

        console.log("selected: " + result.selected);
    });
    </script>

Answer 1

您可以使用为您存储值的隐藏输入来获得预期的输出。
您只需要收听 change <select /> 上的事件并相应地更新隐藏的输入。

简短示例:

$(function() {
  $('.chosen-select').chosen({}).change(function() {
    let selectedOptions = [].slice.call(this.selectedOptions);
    let optionValues = selectedOptions.map(o => o.value);
    $(".idb").val(optionValues.join(","));
  });

  // to show the output in demo, remove this
  $('form').submit(function(ev) {
    ev.preventDefault();
    console.log($('form').serialize());
  });
});

.chosen-select { width: 300px; }

<link href="https://unpkg.com/chosen-js@1.8.7/chosen.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/chosen-js@1.8.7/chosen.jquery.min.js"></script>

<form action="./index.html" method="GET">
  Device Id:
  <input type="hidden" value="" name="idb" class="idb" />
  <select data-placeholder="Input here device id" multiple class="chosen-select">
    <option value="" hidden></option>
    <option>01</option>
    <option>02</option>
    <option>03</option>
    <option>04</option>
    <option>05</option>
    <option>06</option>
    <option>07</option>
    <option>08</option>
  </select>
  <input type="submit" value="Wyślij" />
</form>

如果您希望结果为数组而不是逗号分隔的字符串，您可以尝试使用 idb[]而不是 idb作为输入名称。(如果你的后台支持的话)