كيف يمكن التعامل مع حقول 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>

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

السؤال

Omer Amad

رابط هذا التعليق

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

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

Recommended Posts

Adnane Kadri

رابط هذا التعليق

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

Mustafa Suleiman

رابط هذا التعليق

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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية