[英]JavaScript/jQuery - Get value of span of current element
So I have some <select>
elements and each of its possible options have a price inside span.所以我有一些
<select>
元素,它的每个可能的选项都有一个跨度内的价格。 I loop through all select tags and I need to get the value of the span of the selected option for each of them.我遍历所有选择标签,我需要为每个标签获取所选选项的跨度值。 So this is my 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>
I tried to access it via the find()
function of jQuery by class and by tag name but I fail to do so.我试图通过 jQuery 的
find()
函数按类和标签名访问它,但我没有这样做。
$('.config-option').each(function() {
var currentElement = $(this);
var optionPrice = currentElement.find('.option-price');
console.log(optionPrice);
});
If I console log optionPrice.val()
I get undefined.如果我控制台日志
optionPrice.val()
我得到未定义。 So how can I access this span?那么我怎样才能访问这个跨度呢? Is there a better way to do it?
有没有更好的方法来做到这一点? A solution using plain JavaScript would do as well.
使用纯 JavaScript 的解决方案也可以。
you shouldn't place tags inside option tag, that said try this你不应该在选项标签内放置标签,说试试这个
$('.config-option').each(function() {
var currentElement = $(this);
var optionPrice = currentElement.find('.option-price').parent().text();
console.log(optionPrice);
});
updated: span tags get removed by browser so use this markup structure更新:跨度标签被浏览器删除所以使用这个标记结构
<select>
<option data-price="PRICE_HERE">
then use this in js然后在js中使用它
$('.config-option option:selected').each(function() {
var optionPrice = $(this).attr('data-price');
console.log(optionPrice);
});
spans don't have a value attribute (only inputs have that) so you need to get the .text() from the span spans 没有 value 属性(只有输入具有该属性),因此您需要从 span 中获取 .text()
$('.config-option').each(function() {
var currentElement = $(this);
var optionPrice = currentElement.find('.option-price').text();
console.log(optionPrice);
});
but why don't you just loop through and pick up the .option-price's specifically?但是你为什么不直接循环并专门选择 .option-price 呢?
$('.option-price').each(function() {
var optionPrice = $(this).text();
console.log(optionPrice);
});
optionPrice.val()
is for input
fields. optionPrice.val()
用于input
字段。
You need to call optionPrice.text()
instead of this.您需要调用
optionPrice.text()
而不是 this。
Try this尝试这个
console.log(optionPrice.text());
Can you add value to option of select box, then you will be easily get the value as您可以为选择框的选项添加值,然后您将很容易获得该值
<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);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.