ربط قائمة منسدلة بأخرى و تكرارها دون تأثير على بيانات القوائم الأخرى في JQuery

بما ان القائمتين ليستا متجاورتين لا يمكن استخدام next، بما انك وجدت العنصر الأب المشترك للقائمتين يمكنك الوصول لأي منهما كالتالي

var mainDIV = $(this).parents('div.sara1'); 

...

success:(data) => {
  mainDIV.find(".size_select").html(data); // الوصول للعنصر عن طريق العنصر الأب
}

يمكن ذلك عن طريق تغيير استهداف القائمة المنسدلة التالية، انت تستهدف جميع العناصر ذات الصف select2، يمكنك الاستفادة من الدالة next في JQuery حيث تستهدف فقط العناصر اللاحقة للعنصر الحالي 

يمكن كتابة المثال كالتالي:

$(".select1").change(function() {
  if ($(this).data('options') === undefined) {
    /*Taking an array of all options-2 and kind of embedding it on the select1*/
    $(this).data('options', $('.select2 option').clone());
  }
  var id = $(this).val();
  var options = $(this).data('options').filter('[value=' + id + ']');
  
  // نستهدف فقط العناصر اللاحقة والمجاورة للعنصر الحالي
  $(this).next('.select2').html(options);
});

بتاريخ 7 دقائق مضت قال محمد المصري5:

ممتاز جدا و اشتغلت عالمثال 10 / 10 

المشكلة اني جيت اطبق الدالة دي في مثال آخر هو المطلوب اصلا 

و هو انه بيانات القوائم options بتيجي من داتابيز مش يدوي

        $(document).on('change', '.color_select', function() {   // source menu
            var id = $(this).val(); //get the current value's option
         var mainDIV = $(this).parents('div.sara1'); // what is the parent div
          var menuSize = mainDIV.children().find(':selected').attr('size_select');  //second menu

               $.ajax({
                type:'POST',
                url: "functions/getSize.php",
                data:{'id':id},
                success:function(data){

                   $(this).next('.size_select').html(data); // i need to define this with a dynamic way

                

                }
            });
        });

و مفيش اي حاجة بتظهر علما اني لما بجيب النتيجة بالشكل ده

$(".size_select").html(data);

بتشتغل عادي جدا لكن نفس المشكلة ، كل القوائم بتتغير 

المشكلة هي في السطر التالي حيث this تدل على التابع التي توجد به مباشرة

success:function(data){

	$(this).next('.size_select').html(data); // this تدل على التابع الحالي

}

يمكن استبدالها بتابع مجهول حيث لا يملك هذا التابع القيمة this بل تكون تدل على قيمة التابع الأب له وهو الذي تريده كالتالي

success:(data) => {

	$(this).next('.size_select').html(data); // this تدل على التابع الأب

}

بتاريخ 21 دقائق مضت قال محمد المصري5:

جربت بال 3 طرق ( اللي 2 اللي بداخل ال comments) و الاخيرة بس هي اللي اشتغلت و برضه نفس الشئ

هل يمكنك تعديل المثال في Code Pen لإرفاق ال HTML ايضا كمثال كامل لأقوم بمساعدتك

ممتاز جدا و اشتغلت عالمثال 10 / 10 

المشكلة اني جيت اطبق الدالة دي في مثال آخر هو المطلوب اصلا 

و هو انه بيانات القوائم options بتيجي من داتابيز مش يدوي

        $(document).on('change', '.color_select', function() {   // source menu
            var id = $(this).val(); //get the current value's option
         var mainDIV = $(this).parents('div.sara1'); // what is the parent div
          var menuSize = mainDIV.children().find(':selected').attr('size_select');  //second menu

               $.ajax({
                type:'POST',
                url: "functions/getSize.php",
                data:{'id':id},
                success:function(data){

                   $(this).next('.size_select').html(data); // i need to define this with a dynamic way

                

                }
            });
        });

و مفيش اي حاجة بتظهر علما اني لما بجيب النتيجة بالشكل ده

$(".size_select").html(data);

بتشتغل عادي جدا لكن نفس المشكلة ، كل القوائم بتتغير 

انا صراحة مستفيد جدا بالحوار و تفتحت لي في باب ال dom traversal حاجات جديدة مكنتش فاهمها

إلا انه و برغم اننا قربنا لسه فيه حاجة تايهة مش ظابطة

success:(data) => {

  // $(this).next('.size_select').html(data); // this تدل على التابع الأب
  //  $("size_select").next().html(data);
  $(".size_select").html(data);
}

جربت بال 3 طرق ( اللي 2 اللي بداخل ال comments) و الاخيرة بس هي اللي اشتغلت و برضه نفس الشئ 

طيب لو انا حابب اعرف ال parent لل size select

حاجة زي كده مثلا

var mainDIV = $(this).parents('div.sara1'); // select is the parent div
var menuSize = mainDIV.children().find(':selected').attr('size_select'); 

 عرفت ال parent الاساسي ، و اديت القائمة size_select للمتغير menuSize 

هل كده صح و لا غلط ؟

و لو صح ، استفيد منها ازاي ، يعني استدعي ازاي القائمة (باسم المتغير ) جوا ال ajax

و لو تفكيري غلط ، ايه الصح ؟

مش هايشتغل على code pen لانه مرتبط بداتابيز

بس هارفق ال html هنا و متشكر جدا لمساعدتك

<div class="col-12 mb-2 row d-flex align-items-center zippers-fields sara1">  <!-- Parent -->
  <!-- القائمة الاولى -->
  <div class="col-4 " style="margin-bottom:30px"> 
    <label class="size12"> تحديد المرياج</label>
    <div class="input-group">

      <!-- color select element -->

      <select name="name" class="form-control color_select" required>  <!-- القائمة الاولى -->
        <option class="size12">فضلا اختر المرياج</option>
        <!-- Query start -->
        <?php
        $meriag = "SELECT `patron_colors`.`id` AS pcID, `patron_colors`.`patron_id` AS pcPID, `patron_colors`.`color_name` AS pcCN, `patron_colors`.`color_count`AS pcCC FROM `patron_colors` INNER JOIN `patron` ON `patron`.`id` = `patron_colors`.`patron_id` INNER JOIN `orders` ON `orders`.`id` = `patron`.`order_id` WHERE `orders`.`id` =$order_id";

        $result = $conn->query($meriag);

        while ($row = $result->fetch_assoc()) {

          echo '<option class="text-danger color_count" type="buttons"  idd="' . $row['pcID'] . '" value="' . $row['pcID'] . ' ">  ' . $row['pcCN'] . '</option>';
        }

        ?>

      </select>

    </div>

  </div>

  <!-- القائمة الثانية -->

  <div class="col-2" style="margin-bottom:30px">
    <label class="size12">تحديد المقاس</label>
    <div class="input-group">

      <select id="size" name="name" class="form-control size_select" required>
        <option class="size12" >قم باختيار المرياج اولا</option>

      </select>
    </div></div>
</div>

و ده محتوى ملف getsize.php اللي من خلاله بجيب بيانات القائمة 2

<?php

include("../includes/db.php");



$id = $_POST['id'];

echo '<option selected disabled value="">تحديد المقاس</option>';

if(isset($id)){

$result = $conn->query("SELECT * FROM patron_sizes WHERE color_id='$id'");

while ($row=$result->fetch_assoc()){