Seçtiğim değere göre diğer Selectlerin açılması yardım - Sayfa 2

28-01-2022, 23:29:29

#10

freguencey

Hocam takıldığınız veya hata aldığınız noktayı eklermisiniz?

28-01-2022, 23:40:12

#11

freguencey adlı üyeden alıntı: mesajı görüntüle

Hocam takıldığınız veya hata aldığınız noktayı eklermisiniz?

Hocam takıldığım konu, arama yaparken select optionların valuelerine id tanımlamam gerekli, ama arama moturunun işleyişi valuede gösterilen id lere veya textte göre arama yapıyor bildiğim kadarıyla, daha önce kullandığım kodlamayı bir türlü uyduramadım, seçeceğim seçenek için ayrı bir div id disi oluşturmam gerekli, yani her div içerisine istediğim form elemanlarını yerleştirmem gerekli, buda kod kalabalığına sebep olacak.
aşağıda daha önce Bildiğimiz klasik ASP de uygulamıştım, PHP ye tam olarak hakim değilim

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
$(document).ready(function() {
$.divliste = {
'0' : $([]),
'1' : $('#1'),
'2' : $('#2'),
'3' : $('#3'),
'4' : $('#4'),
'5' : $('#5'),
'6' : $('#6')
};

$('.divsecici').change(function() {
// hide all
$.each($.divliste, function() { this.hide(); });
// show current
$.divliste[$(this).val()].show();

//classı selsts olan selectleri seçilmemiş yapıyoruz div değiştiğinde
$('#1 option, #2 option, #3 option, #4 option, #5 option, #6 option').attr('selected',false);
$('#1 input[type="checkbox"], #2 input[type="checkbox"], #3 input[type="checkbox"], #4 input[type="checkbox"], #5 input[type="checkbox"], #6 input[type="checkbox"]').attr('checked', false);
$('#1 input[type="text"], #2 input[type="text"], #3 input[type="text"], #4 input[type="text"], #5 input[type="text"], #6 input[type="text"]').val('');
});
});
</script>
</head>

<body>
    <div>
        <select name="kategori_id" class="divsecici" id="choice">
            <option value="" salected>Lütfen Seçiniz</option>
            <option value="1">Kategori 1</option>
            <option value="2">Kategori 2</option>
            <option value="3">Kategori 3</option>
            <option value="4">Kategori 4</option>
            <option value="5">Kategori 5</option>
        </select>
    </div>
    
    <div id="1" style="display: none;">
        <select size="1" name="oda">
                    <option selected value="">Oda</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                    <option value="13">13</option>
                    <option value="14">14</option>
                    <option value="15">15</option>
                </select>
    </div>
    <div id="2" style="display: none;">
        <select size="1" name="salon">
                        <option selected value="">Salon</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                    </select>
    </div>
    <div id="3" style="display: none;">
        <select size="1" name="katsayisi">
                        <option selected value="">Kat Sayısı</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                    </select>
    </div>
    <div id="4" style="display: none;">
        <select size="1" name="bulundugukat">
                        <option selected value="">Bulunduğu Kat</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                    </select>
    </div>
    <div id="5" style="display: none;">
        <select size="1" name="balkon">
                        <option selected value="">Balkon</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                    </select>
    </div>
</body>
</html>

29-01-2022, 21:54:51

#12

recepozmen_67

jquery de bütün veriyi önceden sayfada yüklenmiş olması gerekir ama bunu ajax ve ufak bir backend php ile çok rahat yapabilrsin. hatta ben çokça kullanırım bu tür optionları. çok ta rahat oluyor. sayfanın yüklenmesini de geciktirmemiş oluyorum...
29-01-2022, 22:05:24

#13

emlak21

recepozmen_67 adlı üyeden alıntı: mesajı görüntüle

jquery de bütün veriyi önceden sayfada yüklenmiş olması gerekir ama bunu ajax ve ufak bir backend php ile çok rahat yapabilrsin. hatta ben çokça kullanırım bu tür optionları. çok ta rahat oluyor. sayfanın yüklenmesini de geciktirmemiş oluyorum...

Merhaba Hocam
örnek verme şansın varmı

29-01-2022, 23:08:30

#14

recepozmen_67

function listele(){
    var val = $("#değerialınacakolanselectidsi").val();
    $.ajax({
        type: "POST",
        url:  "/path/path/ajax.php",
        data: "action=fecthlist&deger="+val,
        cache: false,
            success: function(data){
                ////buraya da domu bağlayacaksın...  data dizi olarak gelir.  dizi için for veya forEach kullanılabilir. 
                document.getElementById('ListBaslik').innerHTML=' listeleniyor';
                document.getElementById('ResultListArea').innerHTML='';/// bu her seçim yaptıklarında önceki listelemeden kalanları silmek için
                var city = $('#sonuçlarınlisteleneceğiselectidsi');
                for(key in data){
                    /// buraya optionları doma aktarmak için olan kısmı yazıyoruz. 
                    city.append('<option value='+ data['deger'] +' >' + data['isim'] + '</option>';// append ile ResultListArea idli olan html elemanınnın içine optionları ekler. 
                }
                console.log(data);
    });
}

php sayfsına da:

<?php 


$action = htmlspecialchars($_POST["action"]);
if ($action=="fecthlist"){
    $value = htmlspecialchars($_POST['deger']);
    $result = []; 
    if($value== "1"){
        $result[] = Array(
            'isim'=> "option da gözükecek değer",
            'deger'=> "option da value kısmına eklenecek değer";
           );    
    }

    Headers("Content-type: application/json");
    echo json_encode($result);
}

?>

29-01-2022, 23:11:46

#15

recepozmen_67

emlak21 adlı üyeden alıntı: mesajı görüntüle

Merhaba Hocam
örnek verme şansın varmı

cevaladım ama editorde yazdım ondan bozuk mıkmış heralde. beautifier den düzelterek bakabilirsin. daha anlaşılır olacaktır
29-01-2022, 23:25:39

#16

emlak21

recepozmen_67 adlı üyeden alıntı: mesajı görüntüle

cevaladım ama editorde yazdım ondan bozuk mıkmış heralde. beautifier den düzelterek bakabilirsin. daha anlaşılır olacaktır

Hocam özelden attığım kodlama ile ilgili bir şey yapamayızmı, veri eklerken bu şekilde kullanıyorum
30-01-2022, 21:33:33

#17

emlak21

Yardımcı olacak bilgili Arkadaş yokmu?

01-02-2022, 06:02:41

#18

recepozmen_67

bu tip işlemlrede eğer database den gelen bir değer söz konusu ise yani kullanıcının seçiminden sonra yükleneek olan seçenekler db den kontrol ediliyor ise kesinlikle ajax kullanılmalı... sayfa yenilenmediğitakdirde veriler hep aynı kalacaktır ve güncel olmayabilir ama ajax ile güncel verileri çekebilirsiniz... Eğer static veri ise o zaman jquery hide show gibi basit bir mantık kullanılabilir.

static veri için hemen hemen her yerden örnek bulabilirsin. basit olack ama fikir vermesi için...

<script url="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<form action="#fuck">
<select onchange="change(this)" id="select1">

<option value="1">birinci şehir</option>

<option value="2">ikinci şehir</option>

<option value="3">üçüncü şehir</option>

</select>

<select id="select2">

<option name="1" value="1">birinci şehi birinci otel</option>

<option name="1"  value="2">birinci şehi ikinci otel </option>

<option name="1"  value="3">birinci şehi üçüncü otel </option>

<option name="2" value="1">ikinci şehir birinci otel </option>

<option name="2"  value="2">ikinci şehir ikinci otel </option>

<option name="2"  value="3">ikinci şehir üçüncü otel </option>

<option name="3" value="1">üçüncü şehir birinci otel </option>

<option name="3"  value="2">üçüncü şehir ikinci otel </option>

<option name="3"  value="3">üçüncü şehir üçüncü otel </option>

</select>
</form>

function change(el){
  var ev = el.value;
  $("#select2 option").hide();
   $('#select2 option[name="'+ev+'"]').show();
    document.getElementsByName(ev)[0].selected = true;
console.log(ev);
}

bu olayı basic düzeyde anlaman için faydalı olucaktır.