JavaScript/jQuery - Get Wert der Spannweite des aktuellen Elements

Question

So habe ich einige <select> Elemente und jede ihrer möglichen Optionen haben einen Preis innerhalb der Spannweite. Ich durchlaufe alle Auswahl-Tags und ich muss den Wert der Spanne der ausgewählten Option für jeden von ihnen erhalten. Das ist also mein Code

<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> 

Ich habe versucht, es über die find() Funktion von jQuery für den Zugriff durch Klasse und von Tag-Namen, aber ich dies nicht tun.

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

Wenn ich Protokoll optionPrice.val() trage, bekomme ich undefined. Wie kann ich auf diese Zeitspanne zugreifen? Gibt es einen besseren Weg, es zu tun? Eine Lösung, die einfaches JavaScript verwendet, würde ebenfalls funktionieren.

Answer 1

Sie shouldn bekommen sein‘ t Platzieren Sie die Tags innerhalb des Optionstags, versuchen Sie diese

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

aktualisiert: span-Tags durch Browser entfernt bekommen so verwenden diese Struktur Markup

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

diese dann in js verwenden

$('.config-option option:selected').each(function() { 
    var optionPrice = $(this).attr('data-price'); 
    console.log(optionPrice); 
}); 

Answer 2

Spannweiten haben keinen Wert Attribut (nur Eingänge haben, dass), so müssen Sie die .text() aus der Spanne

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

zu bekommen, aber warum Sie nicht nur eine Schleife durch und holen der Optionspreis ist speziell?

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

Answer 3

optionPrice.val() ist für input Felder aus.

Sie müssen stattdessen optionPrice.text() aufrufen.

testen Werde

console.log(optionPrice.text()); 

Answer 4

Können Sie Wert auf Option Select-Box hinzufügen, dann werden Sie leicht den Wert als

<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> 

Script

$('.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); 
});