Php

Omer Amad · 11 أغسطس

كيفكم يا أصدقاء... لديه form عباره عن سلكت مرتبطة في بعضها .... خاص ب ارسال البيانات.... وبدي اعمل صفحة تعديل بيانات بنفس الform....

<!DOCTYPE html>
<html>
<head>
  <title>Dependent Select Fields</title>
</head>
<body>

  <label for="area">Area name:</label><br>
  <select id="area" name="H1">
    <option value="">Select an area</option>
    <option value="region1">The first region</option>
    <option value="region2">The second area</option>
    <option value="region3">The third region</option>
  </select>

  <div id="side-container" style="display:none;">
    <label for="side">Side:</label><br>
    <select id="side" name="H2">
      <option value="">Select a side</option>
      <option value="side1">The first side</option>
      <option value="side2">The second side</option>
      <option value="side3">The third side</option>
    </select>
  </div>

  <div id="academic-container" style="display:none;">
    <label for="academic">Academic:</label><br>
    <select id="academic" name="H3">
      <option value="">Select academic level</option>
      <option value="bachelors">Bachelors</option>
      <option value="preparatory">Preparatory school</option>
      <option value="medium">Medium</option>
    </select>
  </div>

  <div id="jurion-container" style="display:none;">
    <label for="jurion">Jurion:</label><br>
    <select id="jurion" name="H4">
      <option value="">Select a jurion</option>
      <option value="engineer">Engineer</option>
      <option value="doctor">Doctor</option>
    </select>
  </div>

  <div id="tion-container" style="display:none;">
    <label for="tion">Tion:</label><br>
    <select id="tion" name="H4">
      <option value="">Select a tion</option>
      <option value="neer">Neer</option>
      <option value="tor">Tor</option>
    </select>
  </div>

  <div id="image-container" style="display:none;">
    <label for="image">Image:</label><br>
    <input type="file" id="image" name="H5">
  </div>

  <script>
    const areaSelect = document.getElementById('area');
    const sideContainer = document.getElementById('side-container');
    const academicContainer = document.getElementById('academic-container');
    const jurionContainer = document.getElementById('jurion-container');
    const tionContainer = document.getElementById('tion-container');
    const imageContainer = document.getElementById('image-container');

    areaSelect.addEventListener('change', () => {
      sideContainer.style.display = 'block';
      academicContainer.style.display = 'none';
      jurionContainer.style.display = 'none';
      tionContainer.style.display = 'none';
      imageContainer.style.display = 'none';
    });

    sideContainer.querySelector('select').addEventListener('change', () => {
      academicContainer.style.display = 'block';
    });

    academicContainer.querySelector('select').addEventListener('change', (event) => {
      const selectedValue = event.target.value;

      if (areaSelect.value === 'region1' && selectedValue === 'bachelors') {
        jurionContainer.style.display = 'block';
        tionContainer.style.display = 'none';
      } else if (areaSelect.value === 'region2' && selectedValue === 'bachelors') {
        jurionContainer.style.display = 'none';
        tionContainer.style.display = 'block';
      } else {
        jurionContainer.style.display = 'none';
        tionContainer.style.display = 'none';
      }

      if (selectedValue === 'bachelors') {
        imageContainer.style.display = 'block';
      } else {
        imageContainer.style.display = 'none';
      }
    });
  </script>

</body>
</html

Php

السؤال

Omer Amad

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

Recommended Posts

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية