Question

我有多个选择下拉标签。但是我未能添加被选中的每个项目的值。 This is the Sample Output of Multiple Select Drop-Down 我尝试了这个stack overflow answer

这是我在Laravel上工作时的表单代码

<div class="card-body">
                    <form method="POST" action="{{ route('laboratoryReceptController.store') }}">
                            @csrf

                        <div class="form-group row">
                                <label for="labTestName" class="col-md-4 col-form-label text-md-right">{{ __('Laboratary Test') }}</label>
                                <div class="col-md-6">                                                                                                                                                 
                                    <select multiple="multiple" id="labTestName" name="labTest[]" class="form-control labTestName @error('labTestName') is-invalid @enderror" data-dependent="price">
                                        <option value="">Select Test Name</option>
                                            @foreach ($lab as $item)
                                                <option value="{{ $item->TestPrice }}">{{ $item->TestName }}</option>
                                            @endforeach
                                    </select>
                                    {{ csrf_field() }}
                                    @error('labTestName')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>                              
                            </div>                                                    

                        <div class="form-group row">
                            <label for="price" class="col-md-4 col-form-label text-md-right">{{ __('Test Fee') }}</label>

                            <div class="col-md-6">
                                <input id="price" type="text" class="form-control price @error('price') is-invalid @enderror" name="price" required readonly>

                                @error('price')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="patient" class="col-md-4 col-form-label text-md-right">{{ __('Patient Name') }}</label>

                            <div class="col-md-6">
                                <input id="patient" type="text" class="form-control" name="patient" required>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="number" class="col-md-4 col-form-label text-md-right">{{ __('Patient Number') }}</label>

                            <div class="col-md-6">
                                <input id="number" type="text" class="form-control" name="number">
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="date" class="col-md-4 col-form-label text-md-right">{{ __('Date') }}</label>

                            <div class="col-md-6">
                                <input id="date" type="date" class="form-control" name="date">
                            </div>
                        </div>                                           
                        <div class="form-group row mb-0">
                            <div class="col-md-6 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    {{ __('Save Records') }}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>

它是JavaScript代码

<script type="text/javascript">   
    $(document).ready(function(){
let sum = 0;
$('#labTestName').on('change',function(){
    sum = 0;

    ($("#labTestValue option:selected").val() || []).map(v=>sum += +v.split("|")[1])           
    document.getElementById('price').value=sum;
});});
    </script>

当我尝试此操作时，它在价格textField中仅显示0。还请让我知道为什么下拉GUI不好 its the output of Multiple Drop-Down

Answer 1

也许这对您有帮助。

<!DOCTYPE html>
<html>
<body>
<select id="selmultiple" name="cars" multiple>
  <option value="15">15</option>
  <option value="25">25</option>
  <option value="5">5</option>
  <option value="10">10</option>
</select>
<button id="btn" onclick="add()">Click to get sum</button>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">  
 function add() {
 var sum = 0;
 var values = $('#selmultiple').val();
 values.forEach(function(val){
//try to parse the value that you get from the select tag.
 sum = parseInt(val) + sum;
});
console.log(sum);
}
</script> 
</html>

尝试通过运行代码段分析代码

尝试从“多项选择”下拉列表中添加所选项目的值

1 个答案: