javascript - 为什么 onChange 在第二次尝试时填充下拉列表？

Question

我已经在 Laravel 中编写了依赖下拉列表的代码。一切都很好，但我不知道为什么我的下拉列表会在第二次尝试时填充。我使用了 Metronic 主题的表单转发器库。这是该库DubDriend的链接。这是 HTML 部分。

<div class="form-group  m-form__group row" id="pModel_repeater">
            <label  class="col-lg-2 col-form-label">
                Inventory:
            </label>
            <div data-repeater-list="pModel" class="col-lg-10">
                <div data-repeater-item class="form-group m-form__group row align-items-center">
                    <div class="col-md-3">
                            <div class="m-form__group m-form__group--inline">
                                <div class="m-form__label">
                                    <label>
                                        Product:
                                    </label>
                                </div>
                                <div class="m-form__control">
                                    <select onchange="showModel(this)" id="productss" name="product" class="form-control m-input m-input--air m-input--pill" id="exampleSelect1" required>
                                            <option value="">Select Product</option>
                                        @foreach($product as $key => $value)
									        <option value="{{ $value->id}}">{{ $value->name}}</option>
								        @endforeach	
									</select>
                                </div>
                            </div>
                            <div class="d-md-none m--margin-bottom-10"></div>
                        </div>
                        <div class="col-md-3">
                                <div class="m-form__group m-form__group--inline">
                                    <div class="m-form__label">
                                        <label>
                                            Model:
                                        </label>
                                    </div>
                                    <div class="m-form__control">
                                        <select name="productModel" onchange="showPart(this)" class="form-control m-input m-input--air m-input--pill" id="productModel" required>
                                                <option value="">Select Model</option>	
                                        </select>
                                    </div>
                                </div>
                                <div class="d-md-none m--margin-bottom-10"></div>
                            </div>
                            <div class="col-md-3">
                                <div class="m-form__group m-form__group--inline">
                                    <div class="m-form__label">
                                        <label>
                                            Parts:
                                        </label>
                                    </div>
                                    <div class="m-form__control">
                                        <select name="productPart" class="form-control m-input m-input--air m-input--pill" id="productPart" required>
                                                <option value="">Select Part</option>	
                                        </select>
                                    </div>
                                </div>
                                <div class="d-md-none m--margin-bottom-10"></div>
                            </div>
                        <div class="col-md-3">
                                <div class="m-form__group m-form__group--inline">
                                    <div class="m-form__label">
                                        <label>
                                            Quantity:
                                        </label>
                                    </div>
                                    <div class="m-form__control">
                                        <input name="qty" type="number" class="form-control m-input" placeholder="Enter Quantity" required>
                                    </div>
                                </div>
                                <div class="d-md-none m--margin-bottom-10"></div>
                            </div>
                    <div class="col-md-4">
                        <div data-repeater-delete="" class="btn-sm btn btn-danger m-btn m-btn--icon m-btn--pill">
                            <span>
                                <i class="la la-trash-o"></i>
                                <span>
                                    Delete
                                </span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

这是这里的Javascript函数。

function showModel(abc)
{
    var productName =   $(abc).attr("name");
    var model1 = productName.substr(0, 9);
    console.log(productName + " | " + model1);
    jQuery('select[name="' + productName + '"]').on('change',function(){
                var productID = jQuery(this).val();
                    // console.log(countryID);
               if(productID)
               {
                  jQuery.ajax({
                     url : '/pparts/models/' +productID,
                     type : "GET",
                     dataType : "json",
                     success:function(data)
                     {
                        jQuery('select[name="' + model1 + '[productModel]"]').empty();
                        $('select[name="' + model1 + '[productModel]"]').append('<option value="">Select Model</option>');
                        jQuery.each(data, function(key,value){
                           $('select[name="' + model1 + '[productModel]"]').append('<option value="'+ key +'">'+ value +'</option>');
                        });
                     }
                  });
               }
               else
               {
                  $('select[name="' + model1 + '[productModel]"]').empty();
               }
             });
}

我需要在第一次尝试时填充下拉列表。

标签： javascriptjquerylaravel