• 0

[PHP MYSQL jQuery] تغيير محتوى select box option عند اختيار option من قائمة اخرى

سلام عليكم

الان عندي قاعدة بيانات بهذا الشكل

1.jpg.2b59ed994096221f99547f0bd3931b45.jpg

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

2.jpg.0e4d386bd2db0c6430aa1efd67e7d5b7.jpg

لحد الآن الدنيا تمام جدا

عندي في القائمة المسماه تحديد المقاس المفترض اني لما مثلا اختار اللون الارجواني من قائمة ( اختيار لون المرياج ) تسحبلي من قاعدة البيانات اسماء المقاسات المرتبطة باللون المختار و موضحة في قاعدة البيانات بالشكل التالي 

3.thumb.jpg.0b5680d2c5c1dd89b49f66d3f7decb33.jpg

يعني ببساطة انا عاوز لما المستخدم يحدد اللون مثلا رقم 37 اللي مسميه ارجواني يقوم تلقائي جايب له في القائمة التانية التلات بنود اللي في جدول size_name 

محاولتي كانت كالتالي ( اقوم اولا بعرض الكود على حضراتكم )

اولا الجزء الخاص باختيار اسم اللون و عرضه بالقائمة

<div class="col-3" style="margin-bottom:30px">
<label>اختيار لون المرياج</label>
<div class="input-group">

<select id = "color" name="name" class="form-control color_select" required>
<option >اختيار اللون</option>

<!-- بداية استعلام الوان المرياجات -->

<?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>

 

و القائمة الخاصة باسم اللون انا مديها id اسمه color زي حضراتكم ما شايفين

القائمة الخاصة باسم المقاس كالتالي

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

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

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

و زي ما حضراتكم شايفين انا مدي القائمة دي id اسمه size 

كتبت كود ال jQuery المسئول عن التبديل كالتالي

document.getElementById("color").addEventListener("change", function () {

var id = $(this).(val);

$.post({

url: "functions/getSize.php",

data: {

id: id

},

success: function(data) {

$("#size").html(data);

}

});

});

و محتوى ملف getSize.php و اللي المفروض البرنامج ينفذ اللي فيه كالتالي

<?php

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



$id = $_POST['id'];

echo '<option selected disabled value="">تحديد تصنيف فرعى</option>';

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

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

    echo '<option value="'.$row['size_count'].'">'.$row['size_name'].'</option>';

}

و لكن للاسف الشديد لا شئ يحدث ، اقوم بتغيير اللون و قائمة اسم المقاس كأن على رأسها الطير لا ترى او تسمع شيئا 

ارجو ان اكون قد وفقت في استعراض المشكلة للاساتذة الافاضل و انتظر المساعدة مع الشكر

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 2
var id = $(this).(val);

أعتقد أن الخطأ هنا، 

التصحيح:

var id = $(this).val();

 

إن لم تعمل أجزاء HTML المحدثة، عليك تعديل الاستعلام ليعيد بيانات، ثم تبنى جزء select بشكل ديناميكي بجافاسكربت:

PHP ستعيد مصفوفة أي فقط بيانات..

$result = mysqli_query($con,$sql);

   while( $row = mysqli_fetch_array($result) ){
      $user_id = $row['id'];
      $user_name = $row['name'];

      $users_arr[] = array("id" => $user_id, "name" => $user_name);
   }

في استقبال النتيجة، نبني العناصر فا جافاسكربت:

$.post({
            url: 'getUsers_ids.php',
            data: {depart:deptid},
            dataType: 'json',
            success:function(response){

                var len = response.length;

                $("#sel_user").empty();
                for( var i = 0; i<len; i++){
                    var id = response[i]['id'];
                    var name = response[i]['name'];
                    
                    $("#sel_user").append("<option value='"+id+"'>"+name+"</option>");

                }
            }
        });

 

2 اشخاص أعجبوا بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

شكر الله لك استاذنا الفاضل

نعم معك حق ، و قمت بالتعديل فعلا 

الا انها لم تعمل يتغيير السكربت بالشكل التالي 

 

	$(document).on('change', '.color', function() {
    var id = $(this).val(); //get the current value's option
    $.ajax({
        type:'POST',
     url: "functions/getSize.php",
        data:{'id':id},
        success:function(data){

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

        }
    });
});
	

مجرد غيرت طريقة اخبار البرنامج بماذا يفعل عند تغيير قائمة color 

من 

document.getElementById("color").addEventListener("change", function () {

إلى 

	$(document).on('change', '.color', function() {

و ضبطت لكن لا اعلم لماذا لم تضبط دالة addEventListener 

ككل خالص شكري لك و احملني فالتطبيق الذي اعمل عليه ضخم و خبرتي ليست مثلكم و انا اتعلم منكم 

 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 53 دقائق مضت قال محمد المصري5:

ضبطت لكن لا اعلم لماذا لم تضبط دالة addEventListener

السبب أنها لم تعمل ان color هو class وليس id 

 

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

getElementById

وهذه الدالة تجلب فقط id

احسنت بالتوفيق

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ الآن قال Wael Aljamal:

السبب أنها لم تعمل ان color هو class وليس id 

 

وهذه الدالة تجلب فقط id

احسنت بالتوفيق

اشكرك جدا ، معلومة جديدة تعلمتها ربنا يعزكم 

النتيجة مع استفسار بسيط جدا في هذا الفيديو يتعلق انه انا بكرر القائمة دي و كل قائمة لها اعدادات منفصلة ، لما بغير في القائمة التانية او التالتة مثلا اللون فقائمة المقاس الاولى بتتتغير 

فعاوز اميزهم ، و بدور على فكرة 

الفيديو هايفهم حضرتك المشكلة بشكل اوضح

2021-08-21_00-56-52.mp4

و كود ال jQuery اهو 

		<script>	
	$(document).on('change', '.color', function() {
    var id = $(this).val(); //get the current value's option
    $.ajax({
        type:'POST',
     url: "functions/getSize.php",
        data:{'id':id},
        success:function(data){
            $(".size").html(data);

        }
    });
});
	
		</script>

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ منذ ساعة مضت قال محمد المصري5:

النتيجة مع استفسار بسيط جدا في هذا الفيديو يتعلق انه انا بكرر القائمة دي و كل قائمة لها اعدادات منفصلة ، لما بغير في القائمة التانية او التالتة مثلا اللون فقائمة المقاس الاولى بتتتغير 

إن الشيفرة السابقة يتم تنفيذها لكل القوائم لأن لهم صنف مشترك كما أعتقد، فأي تغيير فيهم يسبب نفس التعديل

$(document).on('change', '.color', function() {
                         ^^^^^^^^

$(document).on('change', '#select-1', function() {
                         ^^^^^^^

حاول تبديل كل منهم بشفرة خاصة .. بوضع معرف خاص لكل قائمة مثلا id ويتم جلبة من خلال وضع # أما اسمه

كما أن 

$(".size").html(data);
 ^^^^^^^^^^

هذا يقوم بعمل التحديث بنفس العنصر دوما لأن له الصنف size ارتبط تعديل قائمة مع تعديل أخرى عن طريق id لكل منهما إن أردت..

أعتقد أن الشيفرة الأولى يمكن أن تكون عامة، اجلب العنصر الهدف أيضا بطريقة ديناميكية..

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

الشفرة الاولى فعلا عامة و لا مشكلة بها ، المشكلة في 

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

بقالي ساعتين شغال بكل الطرق اللي اعرفها اني اجيبها بطريقة ديناميكية دون نجاح

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ الآن قال محمد المصري5:

بقالي ساعتين شغال بكل الطرق اللي اعرفها اني اجيبها بطريقة ديناميكية دون نجاح

حاول الوصول للقائمة المرادة من خلال عمل 

var targetSelect = $(#id);

ثم:

$(targetSelect).html(data);

****

يمكنك إسناد خاصة من اختيارك في HTML مثلا:

<div id="navLinks">
  <ul>
    <li class="itemLinks" data-pos="0"></li>
    <li class="itemLinks" data-pos="1"></li>
    <li class="itemLinks" data-pos="2"></li>
    <li class="itemLinks" data-pos="3"></li>

  </ul>
</div>

لاحظ data-pos هي تمثل ترتيب العناصر، يمكن الوصول لها من جيكوري:

var postion = clickedLink.attr("data-pos");

=>

var $links = $(".itemLinks");

$links.click(function(e){

    var clickedLink = e.target;
    clickedLink = $(clickedLink);
    var postion = clickedLink.attr("data-pos");
}

 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 12 دقائق مضت قال Wael Aljamal:

حاول الوصول للقائمة المرادة من خلال عمل 


var targetSelect = $(#id);

ثم:


$(targetSelect).html(data);

****

يمكنك إسناد خاصة من اختيارك في HTML مثلا:


<div id="navLinks">
  <ul>
    <li class="itemLinks" data-pos="0"></li>
    <li class="itemLinks" data-pos="1"></li>
    <li class="itemLinks" data-pos="2"></li>
    <li class="itemLinks" data-pos="3"></li>

  </ul>
</div>

لاحظ data-pos هي تمثل ترتيب العناصر، يمكن الوصول لها من جيكوري:


var postion = clickedLink.attr("data-pos");

=>

var $links = $(".itemLinks");

$links.click(function(e){

    var clickedLink = e.target;
    clickedLink = $(clickedLink);
    var postion = clickedLink.attr("data-pos");
}

 

هذه فعلا من ضمن الطرق التي حاولت بها ، لكن للاسف لم تثمر عن نتيجة ناجحة ، ما زلت احاول و الله المستعان

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن