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

ابرار · 11 مارس 2018

مرحبا

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

Ahmad Mubarak · 11 مارس 2018

اختي الكريمة تحتاجين في هذه الحالة إلى استخدام 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

تمّ تعديل 11 مارس 2018 بواسطة Ahmad Mubarak

Ahmad Mubarak · 11 مارس 2018

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

ابرار · 12 مارس 2018

بتاريخ 20 ساعات قال Ahmad Mubarak:

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

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

محمود قاسم2 · 20 مارس 2018

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

<!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>