#javascript #jquery #laravel
#javascript #jquery #laravel
Вопрос:
Я написал код для зависимого выпадающего списка в Laravel. Все в порядке, но я не знаю, почему мой выпадающий список заполняется со 2-й попытки. Я использовал библиотеку для повторителя форм из темы 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();
}
});
} Мне нужно заполнить выпадающий список с первой попытки.
Комментарии:
1.
showModel()вызывается из встроенного прослушивателя событий изменения. Что помимо его логики заключается в создании другого прослушивателя событий изменения. Этот второй прослушиватель событий не будет запускаться до тех пор, пока элемент снова не изменится, потому что он не существовал, когда произошло первое изменение. Я бы предложил удалить второе создание прослушивателя событий изменения и просто выполнить вашу логику.2. Как я могу получить значение выбранной опции выпадающего списка с именем, а не идентификатором?
3.
abcэто объект выбора, который был изменен, потому что вы передаетеthisего из встроенного прослушивателя событий.abc.valueбыло бы это текущее значение, на которое оно было изменено. Или$(abc).val(), если вам просто нужно использовать jQuery, 🙂