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

我有一个简单的形式，选择为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>

最佳答案

您可以使用隐藏的输入来为您存储期望值，从而获得预期的输出。
您只需要侦听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/[email protected]/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/[email protected]/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作为输入名称。
（如果您的后端支持此功能）

关于javascript - 如何在单个变量下为下拉列表提供多个值？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57221922/