提交表单时如何在jquery中仅设置一个选项选择多选答案

【问题标题】：How to set only one option in jquery chosen multi select when I submit the form提交表单时如何在jquery中仅设置一个选项选择多选
【发布时间】：2022-01-10 08:46:04
【问题描述】：

我在这里使用 Jquery Chosen 插件，我想允许最大数量的选项之一。在下拉菜单中有很多选项，即使我提交的选项不止一个，它也会抛出错误，例如请仅选择一个选项。

在这种情况下，我只想在多选下拉列表中允许一个选项。我无法控制一个选项，任何人都可以请您帮助我如何验证多选中的选项。

$('.chosen-select').chosen()
  .on('change', function(evt, params) {
    max_selected_options = 1;
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" integrity="sha512-yVvxUQV0QESBt1SyZbNJMAwyKvFTLMyXSyBHDO4BG5t7k/Lw34tyqlSDlKIrIENIzCl+RVUNjmCPG+V/GMesRw==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js" integrity="sha512-rMGGF4wg1R73ehtnxXBt5mbUfN9JUJwbk21KMlnLZDJh7BkPmeovBuddZCENJddHYYMkCh9hPFnPmS9sspki8g==" crossorigin="anonymous"></script>

<select data-placeholder="Choose..." class="chosen-select" multiple="" name="milestone">
  <option value=""></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

【问题讨论】：

我修复了你的 sn-p 以实际注册选择
它应该允许多个选项，但是当我单击提交按钮时，它只会抛出错误警报，例如请仅选择一个选项
为什么不阻止它选择多个项目？
如果您只允许一项，为什么还要进行多项选择？听起来像是 X/Y 问题
我想为 jquery 选择的多选下拉列表写一个验证。如果多选下拉菜单在该下拉菜单中包含多个选项，当我单击提交按钮时，它应该会抛出错误消息，例如请仅选择一个选项。

标签： javascript jquery bootstrap-4 multi-select jquery-chosen

【解决方案1】：

只需删除select 标记上的multiple 属性即可。这是一个例子：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" integrity="sha512-yVvxUQV0QESBt1SyZbNJMAwyKvFTLMyXSyBHDO4BG5t7k/Lw34tyqlSDlKIrIENIzCl+RVUNjmCPG+V/GMesRw==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js" integrity="sha512-rMGGF4wg1R73ehtnxXBt5mbUfN9JUJwbk21KMlnLZDJh7BkPmeovBuddZCENJddHYYMkCh9hPFnPmS9sspki8g==" crossorigin="anonymous"></script>

<form id="myForm">
<select data-placeholder="Choose..." multiple class="chosen-select" name="milestone">
  <option value=""></option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>
<input type="submit" value="submit"/>
</form>

<script>
 let choosen = $(".chosen-select").chosen({width: "200px"});
 
 $('#myForm').on('submit', function(e){
  e.preventDefault();
  const form = e.target;
  const milestones = $(form.elements.milestone).val();
  if(milestones.length > 1) alert('error');
  else alert('success')
 })
</script>

【讨论】：

$('.chosen-select').chosen({ width: "150px" })
@mplungjan 我编辑了答案，谢谢。
如果下拉菜单有多个选项，例如当我点击提交时，请更新您的答案。
我想为 jquery 选择的多选下拉列表编写验证。如果多选下拉菜单在该下拉菜单中包含多个选项，当我单击提交按钮时，它应该会抛出错误消息，例如请仅选择一个选项。
@Anantha 我编辑了我的答案，但我不明白为什么您需要多项选择并定义验证以仅选择一个选项。