Estoy usando el complemento Jquery Chosen aquí. Quiero permitir el número máximo de opciones uno. en el menú desplegable tiene muchas opciones, incluso si envío con más de una opción, debería arrojar el error como, por favor, seleccione solo una opción.
Aquí, en este escenario, quiero permitir solo una opción en el menú desplegable de selección múltiple. No puedo controlar la única opción. ¿Alguien puede ayudarme a validar la opción en la selección múltiple?
$('.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>Simplemente elimine el atributo multiple en la etiqueta de select . Aquí hay un ejemplo:
<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>