提交表单时如何在 jquery chosen multi select 中只设置一个选项

Question

我在这里使用 Jquery Chosen 插件我想允许最大选项数为 1。在下拉菜单中它有很多选项，即使我提交了不止一个选项它也应该抛出错误 select 只有一个选项。

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

中的选项

$('.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>

Answer 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>

提交表单时如何在 jquery chosen multi select 中只设置一个选项

How to set only one option in jquery chosen multi select when I submit the form

javascript

jquery

bootstrap-4

multi-select

jquery-chosen