tengo html:
<div> <label>Select1</label> <select class="selectme" data-field-name="select1"> <option selected>Select Me</option> </select> </div> <div> <label>Select2</label> <select class="selectme" data-field-name="select2"> <option selected>Select Me</option> </select> </div>y quiero obtener un atributo personalizado ( nombre de campo de datos ) de esta y la siguiente selección en cada evento de cambio. Puedo obtener este atributo de selección, pero no puedo obtener el siguiente atributo de selección, intenté hacerlo así, pero no funciona. yo uso jquery:
$('.selectme').on('change', function () { var selectOneName = $(this).attr("data-field-name"); var selectTwoName = $(this).next('select').attr("data-field-name"); });como puedo hacer eso? ¡Gracias!
El problema se debe a que next() se usa para recuperar elementos hermanos, y los select no son hermanos.
Para hacer lo que necesita, debe atravesar el DOM para encontrar el contenido que desea recuperar. Una forma de hacer esto sería usar la closest() para obtener el div principal, luego next() y find() , algo como esto:
$('.selectme').on('change', e => { let $select = $(e.target); var fieldName = $select.data('field-name'); console.log(fieldName); var $nextSelect = $select.closest('div').next().find('select'); let nextFieldName = $nextSelect.data('field-name'); console.log(nextFieldName); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div> <label>Select1</label> <select class="selectme" data-field-name="select1"> <option selected>Foo</option> <option>Bar</option> </select> </div> <div> <label>Select2</label> <select class="selectme" data-field-name="select2"> <option selected>Foo</option> <option>Bar</option> </select> </div>Tenga en cuenta que corregí los problemas en su HTML como parte del ejemplo anterior. Supuse que solo eran errores causados por la transposición del código a su pregunta.