1

os cuento. Tengo una pregunta (en un formulario) de tipo que vendrá con un data-value por defecto. Quiero que la ventana del selector venga con el data-value que tiene por defecto. Lo que necesito es que cuando en data-value aparezca por ejemplo en este caso "Póliza contratada" en el front end del selector en lugar de "seleccionar" que me aparezca "Póliza contratada". He intentado hacer este javascript pero no me funciona. No sé que estoy haciendo mal... Estoy muy perdido, muchas gracias

<script>

var select80 = document.getElementById('fe686');


select1.addEventListener('change', ()=> {
    if(select80.value = "Poliza contratada") {
      select80.selectedIndex == 1;
    }
  
});


</script>
<p class="rojo planes"> 4. Estado del cierre</p>
                <br>
 
                <ul class="puntos-encuesta pregunta">
                <select  id="fe684" name="P2_4"  data-value="Póliza contratada">
                     <option value="Seleccionar">Seleccionar
                      </option>
                      <option value="Póliza contratada">Póliza contratada
                      </option>
                      <option value="Ilocalizable">Ilocalizable
                      </option>
                      <option value="Desinteresado">Desinteresado
                      </option>
                      <option value="Sin responder">Sin responder
                      </option>
                      <option value="Llamada nueva">Llamada nueva
                      </option>
                      <option value="Otras">Otras
                      </option>
                  </select>
 
                </ul>

1 respuesta 1

0

Lo único que tendrías que hacer es capturar el valor del atributo data-value para usarlo para darle valor al <select>.

También habría que controlar el que si el valor que tiene el atributo data-value no se encuentra entre los <option> del <select> seleccionar uno por defecto para que no se quede ninguno seleccionado.

$(function () {
  seleccionar_option ();
});

function seleccionar_option () {
  let selects = $('.miselect');
  
  selects.each(function () {
    let select = $(this);
    let valor = select.data('value');
    
    select.val(valor);
    
    if (select.val() === null) {
      select.val('Seleccionar');
    }
  });
 
  return false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select  id="fe684" class="miselect" name="P2_4"  data-value="Póliza contratada">
   <option value="Seleccionar">Seleccionar
    </option>
    <option value="Póliza contratada">Póliza contratada
    </option>
    <option value="Ilocalizable">Ilocalizable
    </option>
    <option value="Desinteresado">Desinteresado
    </option>
    <option value="Sin responder">Sin responder
    </option>
    <option value="Llamada nueva">Llamada nueva
    </option>
    <option value="Otras">Otras
    </option>
</select>

<select  id="fe685" class="miselect" name="P2_4"  data-value="Ilocalizable">
   <option value="Seleccionar">Seleccionar
    </option>
    <option value="Póliza contratada">Póliza contratada
    </option>
    <option value="Ilocalizable">Ilocalizable
    </option>
    <option value="Desinteresado">Desinteresado
    </option>
    <option value="Sin responder">Sin responder
    </option>
    <option value="Llamada nueva">Llamada nueva
    </option>
    <option value="Otras">Otras
    </option>
</select>

No obstante te recomiendo no tener ese tipo de value en tus <option>. Espacios, acentos y carácteres especiales no son amigos del programador y se deberían evitar. En estos casos lo que se suele hacer es tener value numéricos para los <select> y e interpretarlos luego en tu código como necesites.

Ejemplo:

<select class="algo-mas-cc-selector" id="fe684" name="P2_4"  data-value="1">
   <option value="-1">Seleccionar
    </option>
    <option value="1">Póliza contratada
    </option>
    <option value="2">Ilocalizable
    </option>
    <option value="3">No interesado
    </option>
    <option value="4">No procede
    </option>
    <option value="5">Pendiente de respuesta
    </option>
    <option value="6">Volver a llamar
    </option>
    <option value="7">Otras gestiones
    </option>
</select>

Edit:

Esta pregunta ya se hizo, pero al no haber respuesta aceptada no fue posible marcarla como duplicada: Que aparezca en el select el dato que tengo en data value

Edit2:

Para poder aplicar la función a múltiples <select> se tendría que hacer uso de una clase y luego a través de un bucle, recorrer cada item de esa clase para ir asignándole su correspondiente valor. Edité la respuesta para contemplar este caso.

2
  • Mil gracias! Me gustaría saber qué pasa si tuviese dos preguntas de select distintas? No es capaz de cogermelo bien aun cambiando el id
    – Rat8989
    el 23 jun. 2020 a las 10:38
  • Edité la respuesta para contemplar ese caso.
    – phpMyGuel
    el 23 jun. 2020 a las 11:09

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.