Este es mi HTML:
<div class="col-md-6"> <div class="form-group"> <label>Departement</label> <select class="form-control departement" name="worker_departement_edit" id="worker_departement_edit" required > <option class="default" disabled selected value=""> Please select a departement! </option> </select> <div class="invalid-feedback"> Please select an option! </div> </div> </div>Y este es un evento cuando hago clic en el botón de edición para agregar la opción dentro de la selección:
$(".departement").append('<option value="' + element['id_departement'] + '">' + element['depart_name'] + '<option>')Y este es mi código cuando quiero seleccionar una opción:
$("#worker_departement_edit").children(".default-depart").remove() $("#worker_departement_edit").val(datas[0]["departement"]).change(); Era console.log this $("#worker_departement_edit").children(".default-depart") y estuvo bien también intenté consolar.registrar los datos variables y también estuvo bien
Lo que he intentado:
$(".default-depart").remove() $(".worker_departement_edit") .children('option[value=' + datas[0]["departement"] + ']') .attr("selected", true)Deberías usar prop() .
Tanto attr() como prop() se utilizan para obtener o establecer el valor de la propiedad especificada de un atributo de elemento, pero attr() devuelve el valor predeterminado (estado original) de una propiedad, mientras que prop() devuelve el valor actual (estado actual). estado).
$("#worker_departement_edit").val(datas[0]["departement"]) $("#worker_departement_edit").find('option[value='+datas[0]["departement"]+']').prop("selected", true)Su código en su mayoría funciona bien. He incluido una versión funcional y simplificada de su código a continuación, haga clic en Ejecutar para verlo en acción.
Algunas cosas que noté:
Su código .append() usa <option> ... <option> - esa última etiqueta debe ser una etiqueta de cierre , </option> ;
No hay ningún elemento con la clase default-depart , por lo que no puede eliminarlo y ese código no está haciendo nada (a menos que ese elemento exista pero no lo haya incluido aquí);
Sería mucho más fácil para ppl ayudar si puede crear un ejemplo MINIMAL , completo y verificable , lo que significa incluir una pequeña parte de su matriz de datas y eliminar CSS, HTML, etc. no relacionados con este problema específico;
Esta pregunta es realmente un duplicado, y creo que debería cerrarse, por ejemplo: Establecer la opción de selección 'seleccionada', por valor
var datas = [ {id: 1, department: 'Work'}, {id: 2, department: 'Fun'}, {id: 3, department: 'Lunch'}, ]; var $select = $(".departement"), $info = $('#info'); $('#add').on('click', function(e) { e.preventDefault(); $select.append('<option value="' + datas[2]['id'] + '">' + datas[2]['department'] + '</option>'); $info.append('Option added!<br>'); }); $('#select').on('click', function(e) { e.preventDefault(); $select.val(datas[2]['id']).change(); $info.append('Option selected!<br>'); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label>Departement</label> <select class="departement" name="worker_departement_edit" id="worker_departement_edit"> <option class="default" disabled selected value="">Please select a departement!</option> </select> <p> <button id="add">Add An Option</button> <button id="select">Select An Option</button> </p> <p id="info"></p>