Estoy creando un formulario dinámico que requiere que los menús desplegables se reconstruyan y validen. Descubrí que puedo reconstruir un menú desplegable usando la opción "menú de configuración", sin embargo, cuando reinicio la validación del formulario, arroja un error de que está vacío incluso cuando se selecciona un valor.
HTML
<form class="ui form"> <div class="required field"> <label for="gender">Dynamic Dropdown</label> <select name="dropdown" class="ui dropdown" id="select"> <option value="">Gender</option> <option value="male">Male</option> <option value="female">Female</option> </select> </div> <div class="ui divider"></div> <div class="ui submit button">Submit</div> </form>JavaScript
function form_init() { $(".ui.form").form({ inline: true, on: 'submit', fields: { dropdown: { identifier : 'dropdown', rules: [ { type : 'empty', prompt : 'Please enter a value' } ] } } }); $(".ui.form").find(".ui.dropdown").dropdown(); } arr = [ {id: 1, name: "Bob"}, {id: 2, name: "Barb"} ]; options = []; for (var i = 0; i < arr.length; i++ ) { options.push({ value: arr[i].id, text: arr[i].name, name: arr[i].name }) } $("#select").dropdown('setup menu', {values: options}); form_init();He construido un JsFiddle aquí https://jsfiddle.net/booshwa/mjuL6tvL/2/
Cualquier ayuda es muy apreciada, no estoy seguro si esto es un error o me estoy perdiendo algo.
También debe editar el contenido del elemento select para que coincida con sus nuevos datos. $("#select").dropdown('setup menu', {values: options}); solo reemplaza los datos "pseudo" que Semantic agrega para fines de interfaz de usuario.
Agregando $('#select').empty(); antes for y ejecutando $('#select').append($('<option>', {value:arr[i].id, text:arr[i].name})); dentro de él resuelve su problema.
En el siguiente ejemplo, también agregué un campo de valor vacío para que pueda ver que funciona.
https://jsfiddle.net/mjuL6tvL/4/
$(".ui.form").form({ inline: true, on: 'submit', fields: { dropdown: { identifier: 'dropdown', rules: [{ type: 'empty', prompt: 'Please enter a value' }] } } }); arr = [{ id: '', name: "Select Name" }, { id: 1, name: "Bob" }, { id: 2, name: "Barb" } ]; options = []; $('#select').empty(); for (var i = 0; i < arr.length; i++) { options.push({ value: arr[i].id, text: arr[i].name, name: arr[i].name }) $('#select').append($('<option>', { value: arr[i].id, text: arr[i].name })); } $("#select").dropdown('setup menu', { values: options }); form { margin: 2em; } <script src="//code.jquery.com/jquery-git.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css" rel="stylesheet" /> <form class="ui form"> <div class="required field"> <label for="gender">Dynamic Dropdown</label> <select name="dropdown" class="ui dropdown" id="select"> <option value="">Gender</option> <option value="male">Male</option> <option value="female">Female</option> </select> </div> <div class="ui divider"></div> <div class="ui submit button">Submit</div> </form>