اذهب إلى المحتوى
  • 1

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

ابرار

السؤال

مرحبا

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 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
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 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
رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...