كيف يمكن التعامل مع حقول select مرتبطة ببعضها؟ بحيث يتم اظهار بعضها بناءا على الأخرى؟

Omer Amad · 8 يوليو

كيفكم يا أصدقاء..... فيه عندي اربع سلكتات.... بدي يكون هناك ارتباط فيما بينهم.... سلكت A لما لما يتم الضغط على الخيار الاول والخيار الثاني يظهر لنا سلكت A1 و A2.... لما يتم الضغط على الخيار الأول من سلكت A2 يظهر لنا سلكت M او V وانبوت لإضافة صوره .... ولما يتم الضغط على الخيار الثاني من سلكت A2 يظهر لنا حقل انبوت إضافة صوره فقط فقط بدون سلكت... . وبشرط سلكت m مرتبط مع الخيار الأول من سلكتA.... وسلكت V مرتبط مع الخيار الثاني من سلكت A

اسماء الاعمدة الخاصة في النصوص

H1 H2 H3 H4

اسم العامود الذي تخزن فيه الصور

H5

<!---A-->
  
  <div id="  " style="display:none;">
            <label for="   ">:Area name</label><br>
            <select id="  " name="H1">
                <option value="The first region">The first region</option>
                <option value="The second area">The second area</option>
                <option value="The third region">The third region</option>
            </select>
        </div>

<!--A1-->
          <div id="  " style="display:none;">
            <label for="   ">:side</label><br>
            <select id="  " name="H2">
                <option value="The  side">The  side</option>
                <option value=" The  side">The  side</option>
                <option value="The  side">The  side</option>
            </select>
        </div>


<!---A2-->
            <div id="  " style="display:none;">
            <label for="   ">:Academic</label><br>
            <select id="  " name="H3">
                <option value="Bachelors"> Bachelors</option>
                <option value="Preparatory school">Preparatory school</option>
                <option value="Medium">Medium </option>
            </select>
        </div>

<!---M-->

              <div id="  " style="display:none;">
            <label for="   ">:Jurion</label><br>
            <select id="  " name="H4">
                <option value="Engineer"> Engineer</option>
                <option value="doctor">doctor</option>
              
            </select>
        </div>




        <!---V-->
              <div id="  " style="display:none;">
            <label for="   ">:tion</label><br>
            <select id="  " name="H4">
                <option value="neer"> neer</option>
                <option value="tor">tor</option>
              
            </select>
        </div>

Adnane Kadri · 8 يوليو

ان كانت البيانات المعروضة في القوائم تتعلق بالخيار المحدد في القائمة السابقة فأنت ستحتاج التعامل مع الخادم لجلب البيانات المعروضة ثم حقنها في حقل select واختيارها. مثال عن ذلك:

حقل المقاطعات التابعة لبلد ما، اذ يتم عرض المقاطعات بحسب الخيار الذي يحدده المستخدم في حقل البلد.

مثال عن ذلك:

let countrySelect = document.querySelector('#country-select')
let citiesSelect = document.querySelector('#cities-select')

/**
* الاستماع لحدث تغيير قيمة البلد
*/
countrySelect.addEventListener('change', function(){
   let country = this.value
   let cities = getCities(country)
   let options = ``
   cities.forEach(city => options += `<option value="${city.id}">${city.name}</option>`)
   citiesSelect.innerHTML += options
})

/**
* جلب المدن الخاصة ببلد ما
* @return array
*/
async function getCities(country){
    let cities = await fetch(`path/to/your/api/${country}/cities`)
    return cities;
}

يمكنك اعتماد نفس المقاربة في مثالك. إذ تعتمد على القيمة المختارة في حقل ما لضبط مجموعة خيارات في حقل خيار آخر.

Mustafa Suleiman · 8 يوليو

من خلال جافاسكريبت، أولاً إنشاء حقول Select مع IDs مختلفة و display: none لإخفائها في البداية، وإنشاء حقل input من نوع file لرفع الصور.

نستخدم addEventListener لالتقاط event التغيير change التغيير في Select الأول، وعند تغيير Select الأول، يتم إظهار Select الثاني و إخفاء الباقي، وهكذا عند تغيير Select الثاني، يتم إظهار Select الثالث بناءً على اختيار Select الأول و الثاني.

وإظهار حقل رفع الصور فقط عند اختيار "Bachelors" في Select الثالث.

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