Html Question posted in
Some basic documentation can be found here.

Html – How to Use same Element over and over again

I have got an HTML Form in which there is a drop down list:

<select id="DWl1">
 <option value="">Please Select</option>
  <option value="C2C">C2C</option>
  <option value="Advance Search">Advance Search</option>
  <option value="EIV">EIV</option>
  <option value="EWS">EWS</option>
  <option value="PSU">PSU</option>
</select>

I have got to use the same drop down list over and over in multiple forms on the same page.

Currently I have created this list with multiple different IDs, like DWl1, Dwl2, DWl3 ect.

Is there a way that I can use this drop down list again and again without having to create so many different IDs?

Tags:

2

Answers


  1. 0

    It sounds like you want to make many similar lists, perhaps dynamically. I think template literals will come in handy here.

    For example,

    let name = "Alice";
let age = 30;
let message = `My name is ${name} and I am ${age} years old.`;
console.log(message);
// Output: My name is Alice and I am 30 years old.

    GO HERE for some handy documentation on template literals.
    To get you started, I would try something like this:

    let forms = 3 // Adjust the number of lists you need

for (i = 0; i < forms; i++) {
  formTemplate = ` 
<span><b>DIV ID = ${i}<b></span>
<select>
 <option value="">Please Select</option>
  < option value="C2C">C2C </option>
  <option value="Advance Search">Advance Search</option>
  <option value="EIV">EIV</option>
  <option value="EWS">EWS</option>
  <option value="PSU">PSU</option>
</select>`


  let newDiv = document.createElement('DIV')
  newDiv.innerHTML = formTemplate
  newDiv.id = `DWI${i}`
  document.querySelector('#forms').appendChild(newDiv)
}
    <html>

<body>

  <div id="forms">

  </div>

</body>

</html>
    Login or Signup to reply.
  2. 0
    1. Create empty divs based on your id tags.
    2. Add your select inside a <template> and add an id to it.
    3. Call a method, that adds the select to different forms, whenever the page has loaded.
    4. Loop through all your ids in 0).
    5. Copy the content of the template via the id you set in 1)
    6. Add an id to the first element (your select tag).
    7. Get a reference to your container where you want to place your select element.
    8. Append your copied select element as a child to your container.

    Hit the Run Code Snippet button below, right-click one of the dropdowns, select Inspect, and see that each has the correct id.

    const addSelects = () => {
  const selectIdArr = ['DWl1', 'DWl2', 'DWl3'];
  let selectElContainer;
  const selectTemplate = document.getElementById('select-template');
  
  for (const id of selectIdArr) { // 3
    const copiedSelect = selectTemplate.content.cloneNode(true);  // 4
    copiedSelect.firstElementChild.id = id; // 5
    
    selectElContainer = document.getElementById(id + '-container'); // 6
    
    selectElContainer.appendChild(copiedSelect);  // 7
  }
}

addSelects(); // 2
    <template id="select-template">
  <select>
   <option value="">Please Select</option>
    <option value="C2C">C2C </option>
    <option value="Advance Search">Advance Search</option>
    <option value="EIV">EIV</option>
    <option value="EWS">EWS</option>
    <option value="PSU">PSU</option>
  </select>
</template>

<form><div id="DWl1-container"></div></form>

<form><div id="DWl2-container"></div></form>

<form><div id="DWl3-container"></div></form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search