当我提交表单时，如何在 jquery 中仅设置一个选项选择多 select

Question

我在这里使用 Jquery 选择插件我想允许最大数量的选项之一。 在下拉菜单中有很多选项，即使我提交的选项不止一个，它也应该抛出错误，例如请 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>