Question

我希望能够选择一种车辆类型并使用与该选择相关的价格将其添加到卡片中服务的基本价格中。我知道有很多示例可以更改第二个下拉菜单中的选项，经典的国家和州示例，但我似乎无法找到任何使用所选菜单项的内容，我可以将其添加到服务价格。这是我到目前为止的代码：

monaco.languages.registerCompletionItemProvider('markdown', {
    provideCompletionItems: function() {
        return {
            suggestions: [
                {
                    label: "random_number",
                    insertText: "random_number"
                },
                {
                    label: "now",
                    insertText: "now"
                },
                {
                    label: "today",
                    insertText: "today"
                },
                {
                    label: "autocomplete does work fine between braces",
                    insertText: "autocomplete does work fine between braces"
                },
            ]
        };
    }
});

monaco.editor.create(document.getElementById("container"), {
    value: "# hello.\n{autocomplete doesn't work between braces: }\nbut it works outside: ",
    language: "markdown"
});

我知道这不是很花哨（或很好）的编程，但我已经坚持了几个小时。我也知道我需要一个脚本来使它真正具有动态性，并且很可能使用表单来选择车辆类型。

Answer 1

<script> 
  function updateServicePrice(vehicle) {
    const vehiclePrice = Number(vehicle.dataset.price);
    const services = Array.from(document.getElementsByClassName('service-price'));
    
    services.forEach(service => {
      service.innerHTML = Number(service.dataset.price) + vehiclePrice;
    });
  } 
</script>


<div class="dropdown">
    <button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Select vehicle type
     </button>
     <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
         @foreach($vehicles as $vehicle)
             <a onclick="updateServicePrice(this)" data-price="{{ $vehicle->price }}" class="dropdown-item" href="#">{{ $vehicle->type }}</a>
         @endforeach
     </div>
</div>
</div>
@foreach($services as $service)
    <div class="card mt-3">
        <div class="card-body">
            <div class="d-flex justify-content-between">
                <h4 class="card-title">{{ $service->nom }}</h4>
                {{--this is where I'd like to use the selected vehicle type to simply add it to 
                the service price. If i do: {{ $service->price + $vehicle->price }} it chooses 
                the last one that went through the foreach loop --}}
                <h3 class="service-price" data-price="{{ $service->price }}">{{ $service->price }}$</h3>
            </div>
            <p class="card-text">{{ $service->description }}</p>
        </div>
    </div>
@endforeach

Laravel 动态依赖下拉菜单

1 个答案: