Question

0

36

Vistas

how to pick a text input field value and store into the existing drop down list

I am creating one drop down and in that dropdown I have a option called others, when others is selected, a new text box appear and user can enter any value. Now i want this entered value to be added to my drop down options. Till now I could implement the first half and i am now unable to add the new value back to my drop down.


function CheckColors(val){
  var element=document.getElementById('popup');
  if (val=='others') {
    element.style.display='block';}
  else {
    element.style.display='none';
  }
}

  <select name="color" onchange='CheckColors(this.value);'> 
    <option>pick a color</option>  
    <option>10%</option>
    <option>20%</option>
    <option>30%</option>
    <option>40%</option>
    <option value="others" >others
        
    </option>
    <input type="button" name="button" value="Add"/>
  </select>
  <input type="text" id="popup" style='display:none;'/>

7 months ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-05T04:34:06.888Z

You would need to get the value that was added to the text box and create a new element to store in side the select.

Here, I am using createElement to create a new option when the user clicks add. Then, I'm setting it's content using innerText to what was added to the input.

I've done this when clicking the add button but it could be used elsewhere. I've also added a check so we don't add an empty value as an option.

const CheckColors = (val) => {
  const element = document.getElementById('popup')
  if (val === 'others') {
    element.style.display = 'block'
  } else {
    element.style.display = 'none'
  }
}

const addBtn = document.querySelector('input[type="button"]')
// Add a listener for when the add button is clicked
addBtn.addEventListener('click', () => {
  // get our dropdown and text box
  const dropdown = document.getElementsByTagName('select')[0]
  const element = document.getElementById('popup')

  // Only add the value to the dropdown if it's not blank
  if (element.value.length !== 0) {
    // create the new option to add to our select
    const option = document.createElement('option')
    // Add the text that was in the text box
    option.innerText = element.value
    // Optionally give the option a value
    option.value = 'something'
    // Let's select this option too
    option.selected = true
    
    // Add the option to the select
    dropdown.appendChild(option)
  }
})

<select name="color" onchange='CheckColors(this.value);'> 
  <option>pick a color</option>  
  <option>10%</option>
  <option>20%</option>
  <option>30%</option>
  <option>40%</option>
  <option value="others" >others

  </option>
  <input type="button" name="button" value="Add"/>
</select>
<input type="text" id="popup" style='display:none;'/>