Así que tengo algunos elementos <select> y cada una de sus posibles opciones tiene un precio dentro del intervalo. Recorro todas las etiquetas de selección y necesito obtener el valor del intervalo de la opción seleccionada para cada una de ellas. Entonces este es mi código

 <select class="form-control config-option" id="s{{ $availableCategory->index}}">
   <option>{{ $availableCategory->default_option }}</option>
     @foreach($availableOptions as $availableOption)
           @if($availableOption->category->name == $availableCategory->name)
                 <option>({{ $availableOption->code }}) {{ $availableOption->name }} <span class="option-price">({{ $currency == 'EUR' ? 'EUR' : 'USD'}} {{ $availableOption->price }})</span></option>
           @endif
     @endforeach
 </select>

Traté de acceder a través de la función find() de jQuery por clase y por nombre de etiqueta, pero no lo consigo.

$('.config-option').each(function() {
     var currentElement = $(this);
     var optionPrice = currentElement.find('.option-price');
     console.log(optionPrice);
 });

Si registro la consola optionPrice.val(), no estoy definido. Entonces, ¿cómo puedo acceder a este lapso? Hay una mejor manera de hacerlo? Una solución que use JavaScript simple también funcionaría.

2
Codearts 13 may. 2016 a las 15:49

4 respuestas

La mejor respuesta

No deberías colocar etiquetas dentro de la etiqueta de opción, que decía prueba esto

$('.config-option').each(function() { 
    var currentElement = $(this);
    var optionPrice = currentElement.find('.option-price').parent().text(); 
    console.log(optionPrice); 
});

Actualizado: el navegador elimina las etiquetas de extensión, así que use esta estructura de marcado

<select>
    <option data-price="PRICE_HERE">

Luego usa esto en js

$('.config-option option:selected').each(function() { 
    var optionPrice = $(this).attr('data-price');
    console.log(optionPrice); 
});  
1
David D 13 may. 2016 a las 13:21

¿Puede agregar valor a la opción del cuadro de selección, entonces obtendrá fácilmente el valor como

<select class="form-control config-option" id="s{{ $availableCategory->index}}">
    <option>{{ $availableCategory->default_option }}</option>
    @foreach($availableOptions as $availableOption)
        @if($availableOption->category->name == $availableCategory->name)
            <option value="({{ $currency == 'EUR' ? 'EUR' : 'USD'}} {{ $availableOption->price }})">({{ $availableOption->code }}) {{ $availableOption->name }} <span class="option-price">({{ $currency == 'EUR' ? 'EUR' : 'USD'}} {{ $availableOption->price }})</span></option>
        @endif
    @endforeach
</select>

Guión

$('.config-option').each(function() {
    var currentElement = $(this);
    // Now you will be able to use val() function
    var optionPrice = currentElement.find('.option-price').val();
    console.log(optionPrice);
});
0
Ranjeet Singh 13 may. 2016 a las 12:57

Los tramos no tienen un atributo de valor (solo las entradas lo tienen), por lo que debe obtener el .text () del tramo

       $('.config-option').each(function() {
        var currentElement = $(this);
        var optionPrice = currentElement.find('.option-price').text();
        console.log(optionPrice);
    });

Pero, ¿por qué no simplemente recorres y recoges el .option-price específicamente?

   $('.option-price').each(function() {
    var optionPrice = $(this).text();
    console.log(optionPrice);
});
0
gavgrif 13 may. 2016 a las 12:55

optionPrice.val() es para los campos input.

Debe llamar a optionPrice.text() en lugar de esto.

Prueba esto

console.log(optionPrice.text());
0
Jitendra Tiwari 13 may. 2016 a las 12:54