كيفية تحديث قيمة سلكت عند اختيار قيمة في سلكت آخر

مغلقمُجاب

بدأه محمد الجرفي في 12 مايو 2013 · 4 رد · 1,054 مشاهدة · في منتدى تطوير المواقع بـ PHP

#112 مايو 2013 في 10:20 صاحب الموضوع

عندي سلكت انواع الأصناف و سلكت آخر أسماء الأصناف و سلكت ثالث وحدات الأصناف .

كل واحد فيهم يأخذ القيم من جدول خاص به.

1- جدول أنواع الأصناف يحتوي على حقلين ( رقم النوع و اسم النوع ) (1 , مواد غذائية و 2 , مواد تنظيف و 3 , ملابس و 4 , .... الخ).

2- جدول وحدات الأصناف يحتوي على حقلين ( رقم الوحدة و اسم الوحدة) (1 , علبة و 2 , كيس و 3 , باكت و 4 , .... الخ).

3- جدول أسماء الأصناف يحتوي على 3 حقول ( رقم الصنف و اسم الصنف ونوع الصنف مفتاح أجنبي) (1 , سكر , 1 و 2 , مواد تنظيف , 2 و 3 , ملابس , 3 و 4 , .... الخ).

المطـــــــــــلوب:

عند اختيار نوع الصنف مواد غذائية من الـ سلكت أنواع الأصناف يتم تحديث الـ سلكت وحدات الأصناف والـ سلكت أسماء الأصناف بأصناف المواد الغذائية ووحداتها فقط.

و عند اختيار نوع الصنف ملابس من الـ سلكت أنواع الأصناف يتم تحديث الـ سلكت وحدات الأصناف والـ سلكت أسماء الأصناف بأصناف الملابس ووحداتها فقط.

وهكذا ...... مواد التنظيف والأثاث وغيرها

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

تم تعديل هذه المشاركة بواسطة محمد الجرفي في 12 مايو 2013 في 10:22

#212 مايو 2013 في 17:23

السلام عليكم

الطريقة بإستخدام لغة javaScript ولديك خياران :

أولاً : إستخدام تقنية AJAX عند حدث تغير قيمة الـ select يتم إستدعاء ملف الإتصال بقاعدة البيانات لجلب البيانات من القاعدة .

ثانياً : طباعة جميع البيانات من قاعدة البيانات وإسنادها لمتغير في لغة javaScript والتعامل معه عند حدث تغير قيمة الـ select .

الطريقة الأولي أفضل في حالة أن قاعدة البيانات تحتوي على كمية بيانات ضخمة .

- الطريقة الثانية وهي جلب جميع البيانات مرة واحدة من قاعدة البيانات وإسنادها لمتغير في javaScript وهذه الطريقة أفضل وأسرع ولا تتطلب عملية الإتصال بقاعدة البيانات في كل مرة يتم تغيير قيمة الـ select مما سيوفر الكثير من الوقت ولكن ربما تكون غير مجدية في بعض الحالات التي تحتوي على كمية بيانات كبيرة جداً ويصعب جلبها مرة واحدة فيفضل إستخدام الطريقة الأولى أو الدمج بين الطريقتين .

- في كلتا الحالتين فأنت بحاجة لطباعة البيانات على شكل JSON وتحويلها لكائن في لغة javaScript لتستطيع التعامل مع البيانات .

- يفضل العمل على إحدى مكتبات لغة javaScript كـ jQuery لتسهيل هذه العملية .

لاتحسبن العلم ينفع وحده مالم يتوج ربه بخلاق

لا إله إلا أنت سبحانك إني كنت من الظالمين

#313 مايو 2013 في 10:25

المعذرة سأرفع لك الملف وقاعدة البيانات وأريد أن تعدل عليها عملياً لو تكرمت بالطريقتين الله يكتب أجرك

الملف وقاعدة البيانات.zip

تم تعديل هذه المشاركة بواسطة محمد الجرفي في 13 مايو 2013 في 10:28

#414 مايو 2013 في 02:07 أفضل إجابة

السلام عليكم

أخي عليك دراسة كيفية إنشاء قواعد البيانات العلاقية , فلن تستطيع تطبيق ما تحدثت عنه في الأعلى على قاعدة البيانات التي أرفقتها أنت .

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

سنقوم الآن بإنشاء هيكلة قواعد البيانات

- فلنفرض أننا بحاجة لجدول سنضع به التصنيف وجدول أخر به التصنيف الفرعي وجدول ثالث به المنتجات , فيجب أن تكون هناك علاقة بين هذه الجداول بما أنهم مرتطبطين مع بعضهم البعض تكون هذه العلاقة من خلال إدراج المفتاح الأساسي للجدول كمفتاح غريب في الجدول الأخر وستكون هيكلة قاعدة البيانات كالتالي :

products table // جدول المنتجات أو جدول التصنيف الأساسي
----------------
product_id // المفتاح الأساسي للجدول
product_name // اسم المنتج

subProducts table // جدول المنتجات الفرعية أو جدول التصنيف الفرعي
-----------------
subProduct_id    // المفتاح الأساسي للجدول
subProduct_name    // اسم التصنيف الفرعي
product_id        // مفتاح غريب من جدول التصنيف الأساسي

items table    // جدول الوحدات
------------
item_id        // المفتاح الأساسي للجدول
item_name    // اسم الوحدة
product_id    // مفتاح غريب من جدول التصنيف الأساسي
subProduct_id    // مفتاح غريب من جدول التصنيف الفرعي

- أوامر SQL لإنشاء الجداول السابقة هي كالتالي :

CREATE TABLE products (
    product_id int(10) UNSIGNED AUTO_INCREMENT,
    product_name varchar(255) NOT NULL,
    UNIQUE (product_name),
    PRIMARY KEY (product_id)
)DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;

CREATE TABLE subProducts (
    subProduct_id int(10) UNSIGNED AUTO_INCREMENT,
    subProduct_name varchar(255) NOT NULL,
    product_id int(10) UNSIGNED NOT NULL,
    PRIMARY KEY (subProduct_id),
    FOREIGN KEY (product_id) REFERENCES products(product_id)
)DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;

CREATE TABLE items (
    item_id int(10) UNSIGNED AUTO_INCREMENT,
    item_name varchar(255) NOT NULL,
    product_id int(10) UNSIGNED NOT NULL,
    subProduct_id int(10) UNSIGNED NOT NULL,
    PRIMARY KEY (item_id),
    FOREIGN KEY (product_id) REFERENCES products(product_id),
    FOREIGN KEY (subProduct_id) REFERENCES subProducts(subProduct_id)
) DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;

* سأبدأ بشرح الطريقة الثانية ثم الأولى

اقتباس
ثانياً : طباعة جميع البيانات من قاعدة البيانات وإسنادها لمتغير في لغة javaScript والتعامل معه عند حدث تغير قيمة الـ select .

- مثال مباشر على الطريقة من خلال الرابط التالي

- لفهم الكود التالي يجب أن تكون لديك دراية بلغة javaScript ومكتبة jQuery وإسلوب التعامل مع الكائنات في javaScript والتعامل مع تنسيق JSON , تم تضمين التعليق ضمن الكود لإيضاح أكثر :

<?php    // تضمين ملف بيانات الإتصال بقاعدة البيانات    require_once('config.php');        // متغير لحفظ التصنيف    $data['products'] = null;        // متغير لحفظ التصنيف الفرعي    $data['subProducts'] = null;        // متغير لحفظ المنتجات    $data['items'] = null;        // الإتصال بقاعدة البيانات    $sqlObj = new mysqli($DB['Host'],$DB['UserName'],$DB['UserPass'],$DB['Name']);        // ضبط ترميز قاعدة البيانات    $query = $sqlObj->query("SET NAMES 'utf8'");        // جلب محتويات جدول التصنيف    $query = $sqlObj->query("SELECT * FROM products ORDER BY product_id");        // تخزين بيانات جدول التصنيف في المتغير الذي تم تعريفه مسبقاً    while($row = $query->fetch_array(MYSQLI_ASSOC))    {        $data['products'][] = $row;    }        // جلب محتويات جدول التصنيف الفرعي    $query = $sqlObj->query("SELECT * FROM subProducts ORDER BY subProduct_id");        // تخزين بيانات جدول التصنيف الفرعي في المتغير الذي تم تعريفه مسبقاً    while($row = $query->fetch_array(MYSQLI_ASSOC))    {        $data['subProducts'][] = $row;    }        // جلب محتويات جدول المنتجات    $query = $sqlObj->query("SELECT * FROM items ORDER BY item_id");        // تخزين بيانات جدول المنتجات في المتغير الذي تم تعريفه مسبقاً    while($row = $query->fetch_array(MYSQLI_ASSOC))    {        $data['items'][] = $row;    }?><!DOCTYPE html><html dir="rtl">    <head>        <meta charset="utf-8" />        <script type="text/javaScript" src="js/jquery-1.9.1.min.js"></script>    </head>    <style>        *{padding:0;margin:0;}        body{background-color: #DDD; text-align: center;}        #content {            padding: 15px;            margin: 20px;            display: inline-block;            background-color: #EEE;            font-family: tahoma;            min-height: 100px;            border-radius: 20px;        }        #content table tr:first-child{            background-color: #CCC;        }        #content select{            font-family: tahoma;            min-width: 150px;        }    </style><body><script>    $(function (){        // متغير لحفظ البيانات القادمة من قاعدة البيانات        var data;                // متغير لحفظ الأكواد التي سيتم توليدها على حسب البينات التي سيتم جلبها        var html = '';                // إستقبال البيانات على شكل JSON        data = '<?php echo json_encode($data); ?>';                /*        * تحويل تنسيق الـ        * JSON        * إلى كائن في لغة        * javaScript        */        data = jQuery.parseJSON(data);                /*        * إستدعاء دالة إضافة القيم عند تحميل الصفحة        */        setSelectOptions();                        /*        * حدث تغير قيمة قائمة التصنيف        */        $('#products').change(function(){            changeSubProducts($(this).val());            changeItems($('#subProducts').val());        });                /*        * حدث تغير قيمة قائمة التصنيف الفرعي        */        $('#subProducts').change(function(){            changeItems($(this).val());        });                /*        * دالة تغيير محتوى قائمة التصنيف الفرعي        * تأخذ وسيط وهو الرقم التعريفي للتصنيف الذي تم إختياره من قائمة التصنيف        */        function changeSubProducts(productID){            if(data['subProducts'] != null){                html = '';                for(var i=0;i<data['subProducts'].length;i++){                    if(data['subProducts']['product_id'] == productID){                        html += '<option value="'+data['subProducts']['subProduct_id']+'">'+                                    data['subProducts']['subProduct_name']+                                '</option>';                    }                }                $('#subProducts').html(html);            }        }                /*        * دالة تغيير محتوى قائمة المتجات        * تأخذ وسيط وهو الرقم التعريفي للتصنيف الفرعي الذي تم إختياره من قائمة التصنيف الفرعي        */        function changeItems(subProductID){            if(data['items'] != null){                html = '';                for(var i=0;i<data['items'].length;i++){                    if(data['items']['subProduct_id'] == subProductID){                        html += '<option value="'+data['items']['item_id']+'">'+                                    data['items']['item_name']+                                '</option>';                    }                }                $('#items').html(html);            }        }                /*        * دالة ضبط قيم القوائم عند بداية تحميل الصفحة        */        function setSelectOptions()        {            if(data['products'] != null){                html = '';                for(var i=0;i<data['products'].length;i++){                html += '<option value="'+data['products']['product_id']+'">'+                            data['products']['product_name']+                        '</option>';                }                $('#products').html(html);            }                        if(data['subProducts'] != null){                html = '';                for(var i=0;i<data['subProducts'].length;i++){                    if(data['subProducts']['product_id'] == data['products'][0]['product_id']){                        html += '<option value="'+data['subProducts']['subProduct_id']+'">'+                                    data['subProducts']['subProduct_name']+                                '</option>';                    }                }                $('#subProducts').html(html);            }            if(data['items'] != null){                html = '';                for(var i=0;i<data['items'].length;i++){                    if(data['items']['subProduct_id'] == data['subProducts'][0]['product_id']){                        html += '<option value="'+data['items']['item_id']+'">'+                                    data['items']['item_name']+                                '</option>';                    }                }                $('#items').html(html);            }        }    });</script><div id="content">    <table>    <tr>        <td>التصنيف</td>        <td>التصنيف الفرعي</td>        <td>المنتجات</td>    </tr>    <tr>        <td><select id="products"></select></td>        <td><select id="subProducts"></select></td>        <td><select id="items"></select></td>    </tr>    </table></div></body></html><!-- تم بحمد الله -->

- لا ننسى تغيير إعدادت الإتصال بقاعدة البيانات في ملف config.php

والرابط التالي للملف كامل وبه هيكلة قواعد البيانات وعينة من البيانات لإدخالها أو تشغيل ملف الـ php الموجود في مجلد db لإنشاء الجداول مباشراً وإدخال بعض البيانات المبدئية

change_options.zip

اقتباس
أولاً : إستخدام تقنية AJAX عند حدث تغير قيمة الـ select يتم إستدعاء ملف الإتصال بقاعدة البيانات لجلب البيانات من القاعدة .

- مثال مباشر على الطريقة من خلال الرابط التالي

الكود :

<?php    // تضمين ملف بيانات الإتصال بقاعدة البيانات    require_once('config.php');        // متغير لحفظ التصنيف    $data['products'] = null;        // متغير لحفظ التصنيف الفرعي    $data['subProducts'] = null;        // متغير لحفظ المنتجات    $data['items'] = null;        // الإتصال بقاعدة البيانات    $sqlObj = new mysqli($DB['Host'],$DB['UserName'],$DB['UserPass'],$DB['Name']);        // ضبط ترميز قاعدة البيانات    $query = $sqlObj->query("SET NAMES 'utf8'");?><!DOCTYPE html><html dir="rtl">    <head>        <meta charset="utf-8" />        <script type="text/javaScript" src="js/jquery-1.9.1.min.js"></script>        <link href="css/style.css" rel="stylesheet" type="text/css" />    </head><body><script>    $(function (){        // متغير لحفظ البيانات القادمة من قاعدة البيانات        var data;                // متغير لحفظ الأكواد التي سيتم توليدها على حسب البينات التي سيتم جلبها        var html = '';                /*        * حدث تغير قيمة قائمة التصنيف        */        $('#products').change(function(){                    if($(this).val() == ''){                return false;            }            // البيانات المرسلة لملف المعالجة            sendData = {"product_id":$(this).val()};                        // إرسال الطلب لملف المعالجة عن طريق كائن الأجاكس في مكتبة جيه كويري            $.ajax({                // رابط ملف المعالجة                url:"prossing.php",                // نوع الإرسال                type:"POST",                // البيانات المرسلة                data:sendData,                // دالة ما قبل الإرسال                beforeSend: function (){                    $('.looding').slideDown(100);                },                // دالة نجاح معالجة الملف وتأخذ عدة وسائط أهمها وسيط متغير يخزن به البيانات المعادة من ملف المعالجة                success: function(data){                    // تحويل البيانات المعادة من تنسيق جوسون إلى كائن في لغة جافا سكريبت                    data = jQuery.parseJSON(data);                    if(data['subProducts'] != null)                    {                        html = '';                        for(var i=0;i<data['subProducts'].length;i++){                            html += '<option value="'+data['subProducts']['subProduct_id']+'">'+                                        data['subProducts']['subProduct_name']+                                    '</option>';                        }                        $('#subProducts').html(html);                    }                    $('#items').html('');                },                complete: function() {                    $('.looding').slideUp(100);                }            });        });                /*        * حدث تغير قيمة قائمة التصنيف الفرعي        */        $('#subProducts').change(function(){            sendData = {"subProduct_id":$(this).val()};            $.ajax({                url:"prossing.php",                type:"POST",                data:sendData,                beforeSend: function (){                    $('.looding').slideDown(100);                },                success: function(data){                    data = jQuery.parseJSON(data);                    if(data['items'] != null)                    {                        html = '';                        for(var i=0;i<data['items'].length;i++){                            html += '<option value="'+data['items']['item_id']+'">'+                                        data['items']['item_name']+                                    '</option>';                        }                        $('#items').html(html);                    }                },                complete: function() {                    $('.looding').slideUp(100);                }            });        });    });</script><div id="content">    <div class="looding"></div>    <table>    <tr>        <td>التصنيف</td>        <td>التصنيف الفرعي</td>        <td>المنتجات</td>    </tr>    <tr>        <td>            <select id="products">            <option value=""> إختر تصنيف </option>            <?php                // جلب محتويات جدول التصنيف                $query = $sqlObj->query("SELECT * FROM products ORDER BY product_id");                                // طباعة قائمة التصنيف                while($row = $query->fetch_array(MYSQLI_ASSOC))                {                ?>                <option value="<?php echo $row['product_id']; ?>"><?php echo $row['product_name']; ?></option>                <?php                }            ?>            </select>        </td>        <td><select id="subProducts"></select></td>        <td><select id="items"></select></td>    </tr>    </table></div></body></html><!-- تم بحمد الله -->

وكود ملف معالجة البيانات هو :

<?php
    // تضمين ملف بيانات الإتصال بقاعدة البيانات
    require_once('config.php');
    
    // متغير لحفظ التصنيف الفرعي
    $data['subProducts'] = null;
    
    // متغير لحفظ المنتجات
    $data['items'] = null;
    
    // الإتصال بقاعدة البيانات
    $sqlObj = new mysqli($DB['Host'],$DB['UserName'],$DB['UserPass'],$DB['Name']);
    
    // ضبط ترميز قاعدة البيانات
    $query = $sqlObj->query("SET NAMES 'utf8'");
    
    if(isset($_POST['product_id']))
    {
        $_POST['product_id'] = (int)$_POST['product_id'];
        // جلب محتويات جدول التصنيف الفرعي
        $query = $sqlObj->query("SELECT * FROM subProducts WHERE product_id='{$_POST['product_id']}' ORDER BY subProduct_id");
        
        // تخزين بيانات جدول التصنيف الفرعي في المتغير الذي تم تعريفه مسبقاً
        while($row = $query->fetch_array(MYSQLI_ASSOC))
        {
            $data['subProducts'][] = $row;
        }
    }
    else if(isset($_POST['subProduct_id']))
    {
        $_POST['subProduct_id'] = (int)$_POST['subProduct_id'];
        
        // جلب محتويات جدول المنتجات
        $query = $sqlObj->query("SELECT * FROM items WHERE subProduct_id='{$_POST['subProduct_id']}' ORDER BY item_id");
        
        // تخزين بيانات جدول المنتجات في المتغير الذي تم تعريفه مسبقاً
        while($row = $query->fetch_array(MYSQLI_ASSOC))
        {
            $data['items'][] = $row;
        }
    }
    
    // طباعة البيانات على شكل تنسيق جسون
    echo json_encode($data);
?>

- والرابط التالي لتنزيل التطبيق وجميع ملفاته

change_options2.zip

لاتحسبن العلم ينفع وحده مالم يتوج ربه بخلاق

لا إله إلا أنت سبحانك إني كنت من الظالمين

#514 مايو 2013 في 09:40

مشكور أخي الكريم

ahmedsaoud31

الشرح واضح ومفهوم جزاك الله خيراً وجعل ذلك في ميزان حسناتك وصدقة جاريه لك

ولا نستغني عن خبراتك

هذا الموضوع مغلق.

مواضيع مشابهة

سؤال عن كيفية اختيار أكبر قيمة من عدة حقول5 رد · 12 يناير 2009
اختيار قيمة Cell من GridView عند عملية الحذف7 رد · 13 يونيو 2006
كيف يمكن تحديث قيمة حقل في جدول عند تحديث قيمة حقل فى جدول اخر0 رد · 13 مارس 2017
كيف اتحقق اتحقق من اختيار قيمة في DTPicker3 رد · 24 يونيو 2007
إجبار المستخدم على ادخال قيمه عند الإختيار7 رد · 12 أبريل 2010
كيفية اختيار قيمة نعم أو لا في النماذج المستمرة7 رد · 18 مارس 2013

كيفية تحديث قيمة سلكت عند اختيار قيمة في سلكت آخر

مواضيع مشابهة

عدد الزوار حالياً