• 0

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

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

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

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

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


رابط هذه المساهمة
  • 0

لجعل قائمتين منسدلتين مترابطتين ببعض يجب عليك استخدام 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);
        });
    });
});

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

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


رابط هذه المساهمة
  • 0

بالاضافة إلى رد حسن، هناك إمكانية لعمل نفس الوظيفة عن طريق 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.

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


رابط هذه المساهمة
  • 0

توجد عدّة طرق لفعل ذلك، فيمكنك مثلا برمجة ذلك باستخدام لغة 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;
}

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

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


رابط هذه المساهمة

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

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

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


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

تسجيل الدخول

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


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