Javascript 创建一个新函数

我有一个新的订单页面，在这个页面中，用户应该选择类别，然后，选择服务，然后，填写订单的数量字段

我想创建一个更改，我想用@if和@else定义一个函数

在此函数中，假设未选择服务，则不显示“数量”字段 但如果选择了该字段，则会显示“数量”字段

但我不知道如何定义这个函数。 这是我的代码：

@extends('user.layouts.master')
@section('site_title', 'New Order')
@section('page_title')
    <i class="fa fa-first-order"></i>New Order
    @endsection
@section('body')
    <div class="row">
        <div class="col-md-6 offset-md-3">
            @include('user.layouts.flash')
            <div class="card">
                <div class="card-header d-flex align-items-center">
                    <h3 class="h4">Submit new order</h3>
                </div>
                <div class="card-body">
                    <form action="{{ route('newOrder.store') }}" method="post">
                        @csrf
                        <div class="form-group">
                            <label class="form-control-label"><b>category</b></label>
                            <select class="form-control" id="category" name="category" required>
                                <option>Select category</option>
                                @foreach($categories as $category)
                                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                                @endforeach
                            </select>
                        </div>


                        <div class="form-group">
                            <label class="form-control-label"><b>Service</b></label>
                            <select class="form-control input-lg" id="service" name="service" required>
                            </select>
                        </div>

            @if ($item->service)            



                        <div class="form-group">
                            <label for="details" class="control-label">Details</label>
                            <textarea name="details"
                                      id="details"
                                      rows="5"
                                      style="height: 150px"
                                      class="form-control" readonly></textarea>

                        <div class="form-group">
                            <label class="form-control-label"><b>quantity</b></label>
                            <input class="form-control" name="quantity" id="quantity" required>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <label style="color: #080B6A"><b>Min:</b><span id="min">0</span></b></label>
                            </div>
                            <div class="col-md-6">
                                <label style="color: #080B6A"><b>Max: </b><span id="max">0</span></b></label>
                            </div>
                        </div><br>
                        <div class="row">
                            <div class="col-md-6">
                                <label class="btn btn-success">Total price: <span
                                            id="price">0</span> {{ $general->base_currency }}</label>
                            </div>
                        </div><br>
                        <div class="form-group">
                            <input type="submit" value="Submit" class="btn btn-primary btn-block">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script type="text/javascript">
        $(document).ready(function () {
            // fetch Service
            $(document).on('change', '#category', function () {
                var serId = $('option:selected', this).val();
                $.ajax({
                    type: 'POST',
                    url: '{{ route('get.pack') }}',
                    data: {id: serId},
                    success: function (data) {
                        $('#service').html('');
                        $('#service').append('<option>Select service</option>');
                        $.each(data, function (index, value) {
                            $('#service').append('<option value="' + value.id + '">' + value.name + '</option>');
                        });
                        var total = 0;

                        $('#details').text();
                        $('#min').text(0);
                        $('#max').text(0);
                        $('#price').text(total.toFixed(2))
                    },
                })
            });

            //package price and quantity
            var price = 0;
            var quantity = 0;
            $(document).on('change', '#service', function () {
                var serviceId = $('option:selected', this).val();
                if (!isNaN(serviceId)) {
                    $.ajax({
                        type: 'POST',
                        url: '{{ route('get.pack.details') }}',
                        data: {id: serviceId},
                        success: function (data) {
                            $('#details').text(data.details);
                            $('#min').text(data.min);
                            $('#max').text(data.max);
                            price = data.price_per_k;
                            var total = (price * quantity) / 1000;
                            $('#price').text(total.toFixed(2))
                        },
                    });
                } else {
                    $('#details').text(0);
                    $('#min').text(0);

                    $('#max').text(0);
                    price = 0;
                    quantity = 0;
                    var total = 0;
                    $('#price').text(total.toFixed(2))
                }
            });
            $(document).on('keyup', '#quantity', function () {
                quantity = $(this).val();
                var total = (price * quantity) / 1000;
                $('#price').text(total.toFixed(2))
            });
        });
    </script>
@endsection

@extends（'user.layouts.master'））
@章节（‘现场名称’、‘新订单’）
@章节（“第页标题”）
新秩序
@端部
@第节（“正文”）
@包括（'user.layouts.flash'）
提交新订单
@csrf
类别
选择类别
@foreach（$categories作为$category）
{{$category->name}
@endforeach
服务
@如果（$item->service）
细节
量
最低：0
最高：0


总价：0{{$general->base_currency}


@端部
@节（“脚本”）
$（文档）.ready（函数（）{
//取回服务
$（文档）.on（'change'，'#category'，函数（）{
var serId=$（'option:selected'，this）.val（）；
$.ajax({
键入：“POST”，
url:“{route（'get.pack'）}}”，
数据：{id:serId}，
成功：功能（数据）{
$（“#服务”）.html（“”）；
$（'服务'）.append（'选择服务'）；
$.each（数据、函数（索引、值）{
$（“#服务”）.append（“”+value.name+“”）；
});
var合计=0；
$（“#详细信息”）.text（）；
$（'#min'）。文本（0）；
$（'#max'）。文本（0）；
$（#price'）.text（total.toFixed（2））
},
})
});
//包装价格和数量
var价格=0；
var数量=0；
$（文档）.on（'change'，'#service'，函数（）{
var serviceId=$（'option:selected'，this）.val（）；
如果（！isNaN（serviceId））{
$.ajax({
键入：“POST”，
url:“{route（'get.pack.details'）}}”，
数据：{id:serviceId}，
成功：功能（数据）{
$（'#details'）.text（data.details）；
$（'#min'）.text（data.min）；
$（'#max'）.text（data.max）；
价格=数据。每k价格；
风险价值总额=（价格*数量）/1000；
$（#price'）.text（total.toFixed（2））
},
});
}否则{
$（“#详情”）。文本（0）；
$（'#min'）。文本（0）；
$（'#max'）。文本（0）；
价格=0；
数量=0；
var合计=0；
$（#price'）.text（total.toFixed（2））
}
});
$（文档）.on（'keyup'，'#quantity'，函数（）{
数量=$（this.val（）；
风险价值总额=（价格*数量）/1000；
$（#price'）.text（total.toFixed（2））
});
});
@端部

您可以使用javascript实现这一点

// first we hide what we want using style="display:none" and add a calss or attribute to the hidden elements ex: hidden-elements
<div class="form-group hidden-elements" style="display:none">
                        <label class="form-control-label"><b>quantity</b></label>
                        <input class="form-control" name="quantity" id="quantity" required>
                    </div>


// when we change the value of the service 
$(document).on('change', '#service', function () {
            var serviceId = $('option:selected', this).val();
            if (!isNaN(serviceId)) {
                // here we show the hidden elements after we choose the service
                $('.hidden-elements').show();
                $.ajax({
                    type: 'POST',
                    url: '{{ route('get.pack.details') }}',
                    data: {id: serviceId},
                    success: function (data) {
                        $('#details').text(data.details);
                        $('#min').text(data.min);
                        $('#max').text(data.max);
                        price = data.price_per_k;
                        var total = (price * quantity) / 1000;
                        $('#price').text(total.toFixed(2))
                    },
                });
            } else {
                $('#details').text(0);
                $('#min').text(0);

                $('#max').text(0);
                price = 0;
                quantity = 0;
                var total = 0;
                $('#price').text(total.toFixed(2))
            }
        });

//首先，我们使用style=“display:none”隐藏我们想要的内容，并向隐藏元素ex:hidden elements添加一个Cals或属性
量
//当我们改变服务的价值时
$（文档）.on（'change'，'#service'，函数（）{
var serviceId=$（'option:selected'，this）.val（）；
如果（！isNaN（serviceId））{
//在这里，我们展示了选择服务后隐藏的元素
$（'.hidden elements'）.show（）；
$.ajax({
键入：“POST”，
url:“{route（'get.pack.details'）}}”，
数据：{id:serviceId}，
成功：功能（数据）{
$（'#details'）.text（data.details）；
$（'#min'）.text（data.min）；
$（'#max'）.text（data.max）；
价格=数据。每k价格；
风险价值总额=（价格*数量）/1000；
$（#price'）.text（total.toFixed（2））
},
});
}否则{
$（“#详情”）。文本（0）；
$（'#min'）。文本（0）；
$（'#max'）。文本（0）；
价格=0；
量