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>

---

通过使用为您存储值的隐藏输入，您可以获得预期的输出。 您只需要侦听上的更改事件，并相应地更新隐藏的输入

简短示例：

$function{ $'.select.select{}.changefunction{ 让selectedOptions=[].slice.callthis.selectedOptions； 让optionValues=selectedOptions.mapo=>o.value； $.idb.valoptionValues.join，； }; //要在演示中显示输出，请删除此选项 $'form'.submitfunctionev{ 防止违约； console.log$'form'。序列化； }; }; .选择{宽度：300px；} 设备Id: 01 02 03 04 05 06 07 08

---

通过使用为您存储值的隐藏输入，您可以获得预期的输出。 您只需要侦听上的更改事件，并相应地更新隐藏的输入

简短示例：

$function{ $'.select.select{}.changefunction{ 让selectedOptions=[].slice.callthis.selectedOptions； 让optionValues=selectedOptions.mapo=>o.value； $.idb.valoptionValues.join，； }; //要在演示中显示输出，请删除此选项 $'form'.submitfunctionev{ 防止违约； console.log$'form'。序列化； }; }; .选择{宽度：300px；} 设备Id: 01 02 03 04 05 06 07 08

---

---

我不明白它一开始是如何带来多重价值的。您的选择标记不会定义，除非我缺少多属性。您缺少它。它在OP中，control+单击将允许多个选择，如下面的答案所示。我不明白它如何首先带来多个值。您的选择标记不会定义，除非我缺少多属性。您缺少它。它在OP中，control+单击将允许多个选择，如下面的答案所示。感谢回复。我尝试了你的代码，它将所选的内容分解成一个标准的下拉列表，这不是我想要的。此外，提交按钮停止工作。如果您能帮助我，我将不胜感激。@aretai您需要从我的代码中删除表单提交处理程序，以便“提交”按钮真正提交内容，我只是在演示中添加了它。@aretai是为了再次获得“自动完成”框，而不是您需要调用的常规下拉列表。selected{}on$”。selected-select“感谢您的回复”。我已经删除了表单提交处理程序，提交按钮可以正常工作。但是，它不会为idb获取任何值，即idb值为空。我还调用了$'.selected select'上的.selected{}，但没有成功，即列表仍然是下拉列表。下面是我的代码。@aretai我将我的答案升级为包含所选的js，我假设您正在使用它。您应该得到idb的值。请注意，没有设置名称，只有名称为idb。感谢回复。我尝试了你的代码，它将所选的内容分解成一个标准的下拉列表，这不是我想要的。此外，提交按钮停止工作。如果您能帮助我，我将不胜感激。@aretai您需要从我的代码中删除表单提交处理程序，以便“提交”按钮真正提交内容，我只是在演示中添加了它。@aretai是为了再次获得“自动完成”框，而不是您需要调用的常规下拉列表。selected{}on$”。selected-select“感谢您的回复”。我已经删除了表单提交处理程序，提交按钮可以正常工作。但是，它不会为idb获取任何值，即idb值为空。我还调用了$'.selected select'上的.selected{}，但没有成功，即列表仍然是下拉列表。下面是我的代码。@aretai我将我的答案升级为包含所选的js，我假设您正在使用它。您应该得到idb的值。请注意，没有名称集，只有具有名称idb。您需要删除整个$'form'。submit；请致电:$。selected select'.selected{}使用selected js对我有效，但不确定您在回复时使用的是什么。我已删除整个$表单。提交；呼叫，它正在工作。您需要删除整个$'form'。提交；请致电:$。selected select'.selected{}使用selected js对我有效，但不确定您在回复时使用的是什么。我已删除整个$表单。提交；打个电话，它就开始工作了。

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

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