كيف أغير من قيمة قائمة منسدلة بناء على قائمة أخرى بلغة php؟

حنين · 8 يونيو 2016

لدي قائمتين منسدلتين وأرغب بجعل محتوى إحداهما تابع لمحتوى الأخرى

فمثلًا: إذا حدد الطالب من القائمة الأولى "الفرع العلمي"
سيظهر له في القائمة الثانية مواد الفرع العلمي فقط "رياضيات، ..."
ونفس الحالة إن حدد الطالب "الفرع الأدبي" أو "الفرع التجاري" ستظهر له مواد القسم المحدد.

فكيف يمكنني ذلك باستخدام لغة php؟

hassenzouari98 · 10 يونيو 2016

لجعل قائمتين منسدلتين مترابطتين ببعض يجب عليك استخدام php و ajax و jquery كالاتي :

جدول قاعدة البيانات (cat):

id => المعرّف
name => اسم التصنيف / التصنيف الفرعي
parent_id => لنقوم بربطه بالتصنيف الأب (خاص بالتصنيفات الفرعية / قيمته الافتراضية NULL)

ملف الإتصال (config.php):

$pdo = new PDO('mysql:host=localhost;dbname=cat', 'username_here', 'password_here');
//Don't forget to change 'username_here' and 'password_here'

ملف الوظائف (func.php):

<?php 

require_once('config.php'); 

public function get_cat(){
	global $pdo;
	$val = NULL;
	$stmt = $pdo->prepare("select * from addresses where parent_id =:parent_id"); 
	$stmt->bindParam(':parent_id', $val, PDO::PARAM_NULL); 
	$stmt->execute();  
	return $stmt->fetchAll();
}

public function get_sub_cat($id){
	global $pdo;
	$stmt = $pdo->prepare("select * from addresses where parent_id =:id"); 
	$stmt->bindParam(':id', $id); 
	$stmt->execute();  
	return $stmt->fetchAll();
}

?>

ملف الصفحة الرئيسية التي ستحتوي على القوائم المنسدلة (index.php):

<html>
    <head>
        <title>Your Title</title>
    </head>
    <body>
        <div id="cat">
            <select id="select_change">
                <?php
                require_once('func.php');
                $rows = get_cat();
                foreach ($rows as $row) {
                    ?>
                    <option value="<?php echo $row['id']; ?>"><?php echo $row['name']; ?></option>
                    <?php
                }
                ?>  
            </select>
        </div>
        <div id="sub_cat">
            <!-- Here the sub categories code will be appended -->
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
        <script src="call.js"></script>
    </body>
</html>

الملف الذي سينظّم التصنيفات الفرعية (sub_cat.php):

<select>
      <?php
      if (isset($_POST['get_sub_cat_id'])) {
        require_once('func.php');
        $rows = get_sub_cat($_POST['get_sub_cat_id']);
        foreach ($rows as $row) {
      ?>
      <option value="<?php echo $row['id']; ?>"><?php echo $row['name']; ?></option>
      <?php
        }
      } // End Of "$_POST['get_sub_cat_id']" Checking
      ?>
</select>

الملف الذي سيقوم باستدعاء التصنيف الفرعي حسب التصنيف الأب (call.js):

$(document).ready(function () {
    $('#select_change').on('change', function () {
        var id = this.value;
        $.post("sub_cat.php", {get_sub_cat_id: id}, function (data) {
            $('#sub_cat').append(data);
        });
    });
});

فقط هكذا وسيعمل كل شيء بنجاح.

E.Nourddine · 10 يونيو 2016

بالاضافة إلى رد حسن، هناك إمكانية لعمل نفس الوظيفة عن طريق Jquery، ذلك أن المتصفح لن يكون بحاجة إلى توليد الصفحة لجلب البيانات-هذا ما سيقوم به كود Php-، في حين أن Jquery ستولّد قيم القائمة المنسدلة الثانية بشكل ذاتي عند تغيير قيمة القائمة الأولى، وهذا مثال عملي لذلك:

كود php حيث تم جلب بيانات الدول والمدن من قاعدة البيانات من خلال صفحة fetch_state.php:

</p>
<div id="dropdowns">
 <div id="center" class="cascade">
 <?php
 $sql = "SELECT * FROM tbl_country ORDER BY country_name";
 $query = mysqli_query($con, $sql);
 ?>
 <label>Country:
 <select name="country" id = "drop1">
 <option value="">Please Select</option>
 <?php while ($rs = mysqli_fetch_array($query, MYSQLI_ASSOC )) { ?>
 <option value="<?php echo $rs["id"]; ?>"><?php echo $rs["country_name"]; ?></option>
 <?php } ?>
 </select>
 </label>
 </div>
 <div class="cascade" id="state"></div>
 <div id="city" class="cascade"></div>
 </div>
<p style="text-align: justify;">

كود Jquery المسؤول عن إظهار قيم المدن المناسبة بكل دولة:

</p>
<script>
$(document).ready(function(){
$("select#drop1").change(function(){

var country_id = $("select#drop1 option:selected").attr('value');
// alert(country_id);
 $("#state").html( "" );
 $("#city").html( "" );
 if (country_id.length > 0 ) {

 $.ajax({
 type: "POST",
 url: "fetch_state.php",
 data: "country_id="+country_id,
 cache: false,
 beforeSend: function () {
 $('#state').html('<img src="loader.gif" alt="" width="24" height="24">');
 },
 success: function(html) {
 $("#state").html( html );
 }
 });
 }
});
});
</script>
<p style="text-align: justify;">

هذا المثال يمكن رؤيته من خلال Demo.

هشام رزق الله · 10 يونيو 2016

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

أعتقد أن أفضل حل هو عن طريق استخدام rel="" لإنشاء العلاقة التي تربط الخيارات مع بعضها كما في المثال التالي:

<select name="category">
    <option value="0">None</option>
    <option value="1" rel="accessories">Cellphones</option>
    <option value="2" rel="sports">Sports</option>
    <option value="3" rel="cars">Cars</option>
</select>
<select name="items" class="cascade">
    <option value="3" class="accessories">Smartphone</option>
    <option value="8" class="accessories">Charger</option>
    <option value="1" class="sports">Basketball</option>
    <option value="4" class="sports">Volleyball</option>
    <option value="6" class="cars">Corvette</option>
    <option value="2" class="cars">Monte Carloe</option>
</select>

بعد ذلك نستخدم لغة JQuery لعرض المحتويات التي تم اختيارها واخفاء البقية كالتالي:

$(document).ready(function(){
    var $cat = $('select[name=category]'),
        $items = $('select[name=items]');

    $cat.change(function(){
        var $this = $(this).find(':selected'),
            rel = $this.attr('rel'),
            $set = $items.find('option.' + rel);

        if ($set.size() < 0) {
            $items.hide();
            return;
        }

        $items.show().find('option').hide();

        $set.show().first().prop('selected', true);
    });
});

نستخدم بعض CSS لتعديل العرض:

.cascade {
    display: none;
}

وبعد ذلك ستجدين النتيجة المرجوة، ويمكنك رؤية نسخة تجريبية من القوائم من خلال هذا الرابط.

Aisa Eldulaimi · 20 سبتمبر 2018

بتاريخ On 6/10/2016 at 03:41 قال hassenzouari98:

لجعل قائمتين منسدلتين مترابطتين ببعض يجب عليك استخدام php و ajax و jquery كالاتي :

جدول قاعدة البيانات (cat):

id => المعرّف
name => اسم التصنيف / التصنيف الفرعي
parent_id => لنقوم بربطه بالتصنيف الأب (خاص بالتصنيفات الفرعية / قيمته الافتراضية NULL)

ملف الإتصال (config.php):


$pdo = new PDO('mysql:host=localhost;dbname=cat', 'username_here', 'password_here');
//Don't forget to change 'username_here' and 'password_here'

ملف الوظائف (func.php):


<?php 

require_once('config.php'); 

public function get_cat(){
	global $pdo;
	$val = NULL;
	$stmt = $pdo->prepare("select * from addresses where parent_id =:parent_id"); 
	$stmt->bindParam(':parent_id', $val, PDO::PARAM_NULL); 
	$stmt->execute();  
	return $stmt->fetchAll();
}

public function get_sub_cat($id){
	global $pdo;
	$stmt = $pdo->prepare("select * from addresses where parent_id =:id"); 
	$stmt->bindParam(':id', $id); 
	$stmt->execute();  
	return $stmt->fetchAll();
}

?>

ملف الصفحة الرئيسية التي ستحتوي على القوائم المنسدلة (index.php):


<html>
    <head>
        <title>Your Title</title>
    </head>
    <body>
        <div id="cat">
            <select id="select_change">
                <?php
                require_once('func.php');
                $rows = get_cat();
                foreach ($rows as $row) {
                    ?>
                    <option value="<?php echo $row['id']; ?>"><?php echo $row['name']; ?></option>
                    <?php
                }
                ?>  
            </select>
        </div>
        <div id="sub_cat">
            <!-- Here the sub categories code will be appended -->
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
        <script src="call.js"></script>
    </body>
</html>

الملف الذي سينظّم التصنيفات الفرعية (sub_cat.php):


<select>
      <?php
      if (isset($_POST['get_sub_cat_id'])) {
        require_once('func.php');
        $rows = get_sub_cat($_POST['get_sub_cat_id']);
        foreach ($rows as $row) {
      ?>
      <option value="<?php echo $row['id']; ?>"><?php echo $row['name']; ?></option>
      <?php
        }
      } // End Of "$_POST['get_sub_cat_id']" Checking
      ?>
</select>

الملف الذي سيقوم باستدعاء التصنيف الفرعي حسب التصنيف الأب (call.js):


$(document).ready(function () {
    $('#select_change').on('change', function () {
        var id = this.value;
        $.post("sub_cat.php", {get_sub_cat_id: id}, function (data) {
            $('#sub_cat').append(data);
        });
    });
});

فقط هكذا وسيعمل كل شيء بنجاح.

لقد جربت الكود الذي كتبه الاخ حسين في ملف conf.php وفي السطر رقم 5 مكتوب public function get_cat(){ فيظهر لي خطا املائي علما اني عملت له استنساخ ثم لصق ولا اعلم اين الخطا ارجو المساعدة

كيف أغير من قيمة قائمة منسدلة بناء على قائمة أخرى بلغة php؟

السؤال

حنين

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

Recommended Posts

hassenzouari98

E.Nourddine

هشام رزق الله

Aisa Eldulaimi

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية