1

Estoy creando un formulario para clientes, pero al momento de seleccionar el municipio o ciudad, me guarda el value y no el texto, a continuación dejo el código de lo que tengo:

<div class="form-group col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6">
  <label for="municipioAgregarDatos">MUNICIPIO <strong class="text-danger">*</strong></label>
  <select class="form-control  mayusc text-uppercase" id="municipioAgregarDatos"
    name="municipioAgregarDatos" maxlength="60">
    <option value="1">Ahuachapán</option>
    <option value="2">Apaneca</option>
    <option value="3">Atiquizaya</option>
    <option value="4">Concepción de Ataco</option>
    <option value="5">El Refugio</option>
    <option value="6">Guaymango</option>
    <option value="7">Jujutla</option>
  </select>
</div>

He intentado hacer algo con JS, pero no me funcionó, espero que alguien pueda darme una breve ayuda en lo que estoy intentando resolver.

2
  • 2
    Agrega a la pregunta lo que dijiste que intentaste hacer.
    – JoseMgz_Ux
    el 22 dic. 2022 a las 14:01
  • y si también pones los textos en los values?... el 22 dic. 2022 a las 14:08

1 respuesta 1

0

Pues lo harías teniendo el texto en tus values, y al enviar el formulario envías esos values:

function getValue(value) {
  console.log(value);
}
<div class="form-group col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6">
  <label for="municipioAgregarDatos">MUNICIPIO <strong class="text-danger">*</strong></label>
  <select class="form-control  mayusc text-uppercase" id="municipioAgregarDatos" onchange="getValue(this.value)"
    name="municipioAgregarDatos" maxlength="60">
    <option value="Ahuachapán">Ahuachapán</option>
    <option value="Apaneca">Apaneca</option>
    <option value="Atiquizaya">Atiquizaya</option>
    <option value="Concepción de Ataco">Concepción de Ataco</option>
    <option value="El Refugio">El Refugio</option>
    <option value="Guaymango">Guaymango</option>
    <option value="Jujutla">Jujutla</option>
  </select>
</div>

O si quieres hacerlo con js, podrías utilizar Document.querySelector() para obtener el texto del valor que seleccionas de la siguiente forma:

function getValue(value) {
  let select = document.querySelector("#municipioAgregarDatos option[value='" + value + "']:checked").text;
  console.log(select);
}
<div class="form-group col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6">
  <label for="municipioAgregarDatos">MUNICIPIO <strong class="text-danger">*</strong></label>
  <select class="form-control  mayusc text-uppercase" id="municipioAgregarDatos" onchange="getValue(this.value)"
    name="municipioAgregarDatos" maxlength="60">
    <option value="1">Ahuachapán</option>
    <option value="2">Apaneca</option>
    <option value="3">Atiquizaya</option>
    <option value="4">Concepción de Ataco</option>
    <option value="5">El Refugio</option>
    <option value="6">Guaymango</option>
    <option value="7">Jujutla</option>
  </select>
</div>

2
  • El problema es que al seleccionar un departamento aparece la lista de municipios que pertenecer a ese departamento, y esta sujeto al value de los departamentos. Al seleccionar municipio 1, 2 3, se despliega la lista con otros estados el 22 dic. 2022 a las 16:11
  • algo parecido a mi segundo ejemplo, podrías hacer una condicional (js o php) de que si el value (que recibe como parámetro la función) es 1, sea igual al texto del value 1, así sucesivamente, y el resultado almacenar en una variable, y esa variable enviar en el post de tu formulario. el 22 dic. 2022 a las 16:14

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.