alihankoc Hocam teşekkür ederim, ben bir kaç saatte bu vue js nin nasıl çalıştığını ve neler yapabildiğine dair 2x hızında youtube videolarını izleyerek öğrendim. Aralarındaki fark çok vue ile çok daha düzgün kod yazabiliyoruz, kalıplar halinde. jquery ile bölük pörçük parça pinçik her yere birer pırçık bırakabiliyorsunuz. Ben yazma kısmına henüz karar veremedim, öğrenmek için günde bir kaç saat denemeler yapıyorum. Örnek veriyorum kullanıcı kayıt bölümü yaptım, ülkelere göre şehir ve şehre görede ilçe getirmek için bir API hazırladım, ülke seçince jquery ile ajax gönderiyorum seçtiği ülkeyi ve ülkenin şehirleri ile ilçelerini getiriyorum jsonla sonra bunu select box kısımlarına basıyorum ve aşağıdaki gibi saçma sapan şeyler oldu.
<script>
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var m = $('#ulke').find('option:selected').val();
var t = $('#ulke').find('option:selected').text();
if(m == "TR"){
ulke(t);
}
$('#ulke').change(function () {
var ulkem = $(this).find('option:selected').text();
ulke(ulkem);
});
$(document).on('change', '#sehir' , function(){
var sehir = $(this).find('option:selected').text();
ilce(sehir);
});
function ulke(ulke) {
$.ajax({
type: 'POST',
url : '{{route("bolgegetir")}}',
data : { u: ulke } ,
success : function (gelen) {
if(gelen.durum == 'basarili'){
if(gelen.iller[0].ilceler.length > 0){
var sehirSelectim = '<select id="sehir" class="form-control selectpicker" name="sehir" required="" data-live-search="true" data-live-search-normalize="true" data-parsley-pattern="^[a-zA-Z şŞıİĞğçÇÖöÜü]+$">';
sehirSelectim += "<option value='' selected disabled>{{__('Lütfen İl Seçiniz')}}</option>";
$.each(gelen.iller[0].ilceler, function (index, objectim) {
sehirSelectim += '<option>' + objectim.isim + '</option>';
});
sehirSelectim += '</select>';
$('#sehir').replaceWith(sehirSelectim);
$('#ilce').replaceWith('<select id="ilce" class="form-control selectpicker" name="ilce" required="" data-live-search="true" data-live-search-normalize="true" data-parsley-pattern="^[a-zA-Z şŞıİĞğçÇÖöÜü]+$"><option disabled>{{__('Lütfen İlçe Seçiniz')}}</option></select>');
$('#sehir').selectpicker();
$('#ilce').selectpicker();
}else{
$('#sehir').empty();
$('#sehir').selectpicker('destroy');
$('#ilce').empty();
$('#ilce').selectpicker('destroy');
$('#sehir').replaceWith('<input id="sehir" type="text" class="form-control" placeholder="{{__("Şehir")}}" name="sehir" required="" data-parsley-pattern="^[a-zA-Z şŞıİĞğçÇÖöÜü]+$">');
$('#ilce').replaceWith('<input id="ilce" type="text" class="form-control" placeholder="{{__("İlçe")}}" name="ilce" required="" data-parsley-pattern="^[a-zA-Z şŞıİĞğçÇÖöÜü]+$">');
}
}
}
});
}
function ilce(ilce) {
$.ajax({
type: 'POST',
url : '{{route("bolgegetir")}}',
data : { u: ilce } ,
success : function (gelen) {
if(gelen.durum == 'basarili'){
if(gelen.iller[0].ilceler.length > 0){
var ilceSelectim = '<select id="ilce" class="form-control selectpicker" name="ilce" required="" data-live-search="true" data-live-search-normalize="true" data-parsley-pattern="^[a-zA-Z şŞıİĞğçÇÖöÜü]+$">';
ilceSelectim += "<option value='' selected disabled>{{__('Lütfen İlçe Seçiniz')}}</option>";
$.each(gelen.iller[0].ilceler, function (index, objectim) {
ilceSelectim += '<option>' + objectim.isim + '</option>';
});
ilceSelectim += '</select>';
$('#ilce').empty();
$('#ilce').selectpicker('destroy');
$('#ilce').replaceWith(ilceSelectim);
$('#ilce').selectpicker();
}else{
$('#ilce').empty();
$('#ilce').selectpicker('destroy');
$('#ilce').replaceWith('<input id="ilce" type="text" class="form-control" placeholder="{{__("İlçe")}}" name="ilce" required="" data-parsley-pattern="^[a-zA-Z şŞıİĞğçÇÖöÜü]+$">');
}
}
}
});
}
</script>