• 1

كيفية برمجة select option بلغة php

مرحبا

عندي اثنين select option بحيث ان قائمة الثاني تعتمد على الاختيار من قائمة الاول، يعني مثلاً الاول اختيارين تصميم وبرمجة، اذا اخترت برمجة يظهر لي بالثاني لغات البرمجة، كيف تتم برمجته؟ 

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


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

اختي الكريمة تحتاجين في هذه الحالة إلى استخدام jQuery وجافا سكربت اضافة إلى ال PHP

مثال:

ملف ال HTML يكون هكذا

<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
    <select name="first" id="first" onchange="fillSecond()">
		<option value="0" >الرجاء الإختيار</option>
		<option value="1">برمجة</option>
		<option value="2">تصميم</option>
    </select>
    
	<select name="second" id="second">
		<option value="0" >الرجاء الإختيار</option>
    </select>
    
    <script type="text/javascript">
    function fillSecond() {
        var first = document.getElementById("first");
        var firstSelected = first.options[first.selectedIndex].value;
        $("#second").load("load.php", {
            Id: firstSelected
        });
    }   
    </script>
  </body>
</html>

ملف ال PHP يكون هكذا واحرصي على تسميته load.php

<?php
$id = $_POST['Id'];
if( $id == 1 ):
?>
<option>PHP</option>
<option>HTML</option>
<option>Javascript</option>
<?php
elseif( $id == 2 ):
?>
<option>تصميم داخلي</option>
<option>تصميم بوسترات</option>
<option>تصميم مواقع</option>
<?php endif; ?>

اذا اردتي في ال select الثاني ان تستدعي بيانات من قاعدج البيانات تقومين بتعديل ملف load.php بحيث تضعين while loop او foreach loop لاستدعاء البيانات من قاعدة البيانات
وداخلها تضعين ال option مع المتغيرات داخل الحلقة while او foreach

تمّ تعديل بواسطة Ahmad Mubarak
1 شخص أعجب بهذا

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


رابط هذه المساهمة
  • 0
بتاريخ 20 ساعات قال Ahmad Mubarak:

هل عمل الكود معك؟

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

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


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

يمكن اختصار الوقت في الوصولي الي الملف في كل مرا اختار بها قسم معين غير هذا الكود ::

<!DOCTYPE html>
<html>
<head>
<style>
.subsection option{
display:none;
}
.subsection option.active{
  display: block;
}
</style>
<script type="text/javascript">
  // Mahmmoud Developer ...
window.onload = function() {
    var sections = document.querySelector(".sections");
    sections.onchange = function () {
        var secId = this.value;
        var s_Sections = document.querySelectorAll(".subsection>option");
        var x = 0;
        while (x < s_Sections.length) {
            if(s_Sections[x].dataset.secid == secId){
                s_Sections[x].classList.add("active");
            }
            else{
                s_Sections[x].classList.remove("active");
            }
            x++;
        }
        document.querySelectorAll(".subsection>option[data-secid="+secId+"]")[0].setAttribute("selected",true);
    }
}
</script>
</head>
<body>
<select class="sections">
  <option value="sec1">section1</option>
  <option value="sec2">section2</option>
  <option value="sec3">section3</option>
  <option value="sec4">section4</option>
</select>
<select class="subsection">
  <option value="sub1" data-secid="sec1" class="active">SubSec1-1</option>
  <option value="sub2" data-secid="sec1" class="active">SubSec1-2</option>
  <option value="sub3" data-secid="sec1" class="active">SubSec1-3</option>
  <option value="sub1" data-secid="sec2">SubSec2-1</option>
  <option value="sub2" data-secid="sec2">SubSec2-2</option>
  <option value="sub3" data-secid="sec2">SubSec2-3</option>
  <option value="sub1" data-secid="sec3">SubSec3-1</option>
  <option value="sub2" data-secid="sec3">SubSec3-2</option>
  <option value="sub2" data-secid="sec3">SubSec3-3</option>
</select>
</body>
</html>

 

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

https://www.w3schools.com/code/tryit.asp?filename=FPK1QMD4B47O

تمّ تعديل بواسطة محمود قاسم2

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


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

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

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

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


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

تسجيل الدخول

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


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