4

Tengo el siguiente <select> lo que quiero hacer es agarrar/obtener el texto que contiene y de ser posible el valor numérico.

   <select name="select" id="comprar-js">
            <option value="show1">PLATEA (450$)</option>
            <option value="show2">CAMPO (800$)</option>
            <option value="show3">ESCENARIO (1000$)</option>
            <option value="shoW4">BANDEJA (3000$)</option>
        </select>

Quiero acceder al texto que contiene cada <option> (PLATEA (450$)) y una vez que lo obtengo usar el valor de numero que tiene para realizar operaciones.

1
  • Tienes algún conocimiento de Javascript | JQuery? Commented el 20 jul. 2019 a las 16:33

3 respuestas 3

4

Puedes hacerlo con la siguiente línea

document.getElementById('comprar-js').options[document.getElementById('comprar-js').selectedIndex].text;

document.getElementById('comprar-js').options devuelve el array de opciones y document.getElementById('comprar-js').selectedIndex devuelve el índice seleccionado del array.

Te recomiendo que utilices los atributos data- para facilitar el acceso a información extra. Por ejemplo

<select name="select" id="comprar-js">
            <option data-valor="450" value="show1">PLATEA (450$)</option>
            <option data-valor="800" value="sho2">CAMPO (800$)</option>
            <option data-valor="1000" value="show3">ESCENARIO (1000$)</option>
            <option data-valor="3000" value="shoW4">BANDEJA (3000$)</option>
</select>

Y modificando el código anterior podemos acceder al valor con:

let valorEntrada =  document.getElementById('comprar-js').options[document.getElementById('comprar-js').selectedIndex].dataset.valor;

Acá puedes encontrar más información sobre los atributos data https://developer.mozilla.org/es/docs/Learn/HTML/como/Usando_atributos_de_datos

1
  • Usar dataset también es una buena opción. Commented el 20 jul. 2019 a las 17:01
3

Ambas cosas se pueden realizar, la primera se realiza iterando cada opción dentro del select, la segunda la haremos por medio de expresiones regulares, dejo explicación detallada en el código:

var regExp = /\(([^)]+)\)/; //Este será nuestro factor de búsqueda

$("select option").each(function(){ //Iteramos cada opción del select
    text = $(this).text(); //Capturamos el texto de cada opción
    value = regExp.exec(text); //Por medio de una expresión regular capturamos el valor dentro de paréntesis, esto nos genera un array de dos posiciones, el índice 0 será el valor aún dentro del paréntesis, el índice 1 será el valor sin símbolos.
    console.log("Array de valores capturados", value);
    console.log("Valor sin paréntesis", value[1]);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select name="select" id="comprar-js">
  <option value="show1">PLATEA (450$)</option>
  <option value="sho2">CAMPO (800$)</option>
  <option value="show3">ESCENARIO (1000$)</option>
  <option value="shoW4">BANDEJA (3000$)</option>
</select>

Importante destacar que el código utiliza JQuery, también se podría realizar con JS puro.

3
  • 2
    No es necesario usar expresiones regulares, con un simple substring puedes obtener el valor numérico Commented el 20 jul. 2019 a las 16:40
  • Sabemos que en ocasiones hay múltiples formas de realizar un proceso, esta es la que domino y he preferido. Commented el 20 jul. 2019 a las 16:41
  • El método para hacerlo con jquery es correcto, pero usar regex no creo que sea lo mas adecuado al ser algo complicado, es mejor buscar alternativas mas simples. Commented el 20 jul. 2019 a las 17:00
2

Para obtener el texto de un <option> con javascript puedes hacer lo siguiente; primero obtienes el elemento <select>, luego en este obtienes el option seleccionado del array de opciones con options[combo.selectedIndex] para luego obtener el texto con .text.

Luego para obtener el número del texto puedes quitar el texto con split(), dividiéndolo por los paréntesis y así poder hacer operaciones con el número:

function obtener(){
  //para obtener el texto
  combo = document.getElementById("comprar-js");
  texto = combo.options[combo.selectedIndex].text;
  console.log(texto); 
  //para obtener el numero y hacer operaciones
  numero=(texto.split("(")[1].split("$)")[0]);
  console.log(numero*5);
}
<select name="select" id="comprar-js">
            <option value="show1">PLATEA (450$)</option>
            <option value="show2">CAMPO (800$)</option>
            <option value="show3">ESCENARIO (1000$)</option>
            <option value="shoW4">BANDEJA (3000$)</option>
        </select>
        
        <br>
        <button onclick="obtener()">Obtener</button>

Espero te sea de ayuda, saludos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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