How Do I Create An Element If The Option In Select Tag Is Selected

const ddselect = () => { let displayText = selectTag.options.text; let list = document.querySelector('.list'); let listItem = document.createElement('li'); listItem.inne

Solution 1:

Although it's unclear for me whether you want to create a li element only on a certain selected option, or different li elements for every selected option, but one way of doing what I think you're trying to do is...

Add an Event Listener to your <select> that listens to the change event, then inside this listener's callback function do whatever you want based on the selected value / option.

A short example;

var myOl = document.querySelector("#myol");
var select = document.querySelector("#myselect");

select.addEventListener("change", function(event){

  // Create a new Li element
  let newLi = document.createElement("li");
  // Set the Li Element's Text Content to the selected Option's Text Content
  newLi.textContent = event.target.options[event.target.selectedIndex].textContent;

  // Alternatively you could create a switch / if structure based on event.target.value
  /*
  switch( event.target.value )
  {
      case "1":
          // Do stuff in case of the first option
          break;
      case "2":
          // Do stuff in case of the second option
          break;
      // Etc
  }
  */

  // Add the new Li to the OL
  myOl.appendChild( newLi );

});

<select id="myselect">
  <option value="1">First Option!</option>
  <option value="2">Second Option!</option>
  <option value="3">Third Option!</option>
  <option value="4">Fourth Option!</option>
</select>

<ol id="myol"></ol>