Get text if I select some value from drop list HTML app script-CodePudding

I have this code to get some text if I select a value from the drop list:

<!DOCTYPE html>
<html>
<body>

<div id="addOrderPrompt">
    <center>
    <form> 
      <div id="containerT0"><label for="example">Drop List:</label>
        <select name="exchange" id="exchange">
          <option value="first" rel="firstTarget">First</option>
          <option value="second" rel="secondTarget">Second</option>
        </select>
       </div>
        <a href="https://www.google.com" target="_blank" >Google</a>
        <a href="https://www.facebook.com" target="_blank">Facebook</a>
      </select>
    </form>
    </center> 
</div>

</body>
</html>

I want to hide links I show it if I select some value from the droplist. For example, if I select from the drop list 'First' I want to see just a google link, and if I select 'second' just see the Facebook link.

This is my result:

CodePudding user response：

You can get the selected option from JavaScript using the onchange event and handle the visibility of links using the display property. Here's an example:

function handleChange() {
  var userValueElement = document.getElementById("exchange");
  var userValue = userValueElement.options[userValueElement.selectedIndex].text;
  if (userValue == "First") {
    document.getElementById('google').style.display = 'inline';
    document.getElementById('facebook').style.display = 'none';
  } else if (userValue == "Second") {
    document.getElementById('google').style.display = 'none';
    document.getElementById('facebook').style.display = 'inline';
  }
}

<!DOCTYPE html>
<html>

<body>

  <div id="addOrderPrompt">
    <center>
      <form>
        <div id="containerT0"><label for="example">Drop List:</label>
          <select name="exchange" id="exchange" onchange="handleChange()">
            <option value="first" rel="firstTarget">First</option>
            <option value="second" rel="secondTarget">Second</option>

          </select>
        </div>

        <a id="google" href="https://www.google.com" target="_blank" >Google</a>
        <a id="facebook" href="https://www.facebook.com" target="_blank"  style="display: none">Facebook</a>
        </select>
      </form>
    </center>
  </div>

</body>

</html>