Question

所以我有一些<select>个元素，每个可能的选项都有一个跨越的价格。我遍历所有选择标签，我需要为每个标签获取所选选项的范围值。所以这是我的代码

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

我试图通过类的jQuery find()函数和标记名来访问它，但我没有这样做。

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

如果我控制日志optionPrice.val()我得到了未定义。那么我该如何访问这个范围呢？有没有更好的方法呢？使用纯JavaScript的解决方案也可以。

Answer 1

你不应该在选项标签内放置标签，即试试这个

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

更新：浏览器删除了span标记，因此请使用此标记结构

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

然后在js中使用它

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

Answer 2

跨度不具有值属性（只有输入具有该属性），因此您需要从跨度中获取.text（）

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

但为什么不直接拿起.option-price具体来说呢？

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

Answer 3

optionPrice.val()适用于input字段。

您需要拨打optionPrice.text()而不是此。

试试这个

console.log(optionPrice.text());

Answer 4

您可以为选择框的选项添加值，然后您将轻松获得值

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

脚本

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

JavaScript / jQuery - 获取当前元素的span值

4 个答案: