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

محمد المصري12 · 20 أغسطس 2021

سلام عليكم

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

1.jpg.2b59ed994096221f99547f0bd3931b45.jpg

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

2.jpg.0e4d386bd2db0c6430aa1efd67e7d5b7.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>';

}

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

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

Wael Aljamal · 20 أغسطس 2021

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>");

                }
            }
        });

محمد المصري12 · 20 أغسطس 2021

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

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

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

	$(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

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

Wael Aljamal · 20 أغسطس 2021

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

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

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

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

getElementById

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

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

محمد المصري12 · 20 أغسطس 2021

بتاريخ الآن قال 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>

Wael Aljamal · 21 أغسطس 2021

بتاريخ منذ ساعة مضت قال محمد المصري5:

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

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

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

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

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

كما أن

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

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

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

محمد المصري12 · 21 أغسطس 2021

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

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

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

Wael Aljamal · 21 أغسطس 2021

بتاريخ الآن قال محمد المصري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");
}

محمد المصري12 · 21 أغسطس 2021

بتاريخ 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");
}

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

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

السؤال

محمد المصري12

8 أجوبة على هذا السؤال

Recommended Posts

Wael Aljamal

محمد المصري12

Wael Aljamal

محمد المصري12

Wael Aljamal

محمد المصري12

Wael Aljamal

محمد المصري12

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية