0
160
ViewsGet text if I select some value from drop list HTML app script
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" class="firstTarget">Google</a>
<a href="https://www.facebook.com" target="_blank"class="secondTarget">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:
·
Juan Pablo Isaza
1 answers
Answer question0
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" class="firstTarget">Google</a>
<a id="facebook" href="https://www.facebook.com" target="_blank" class="secondTarget" style="display: none">Facebook</a>
</select>
</form>
</center>
</div>
</body>
</html>
·
Juan Pablo Isaza
Report
Answer question