Blitzilla Blitzilla - 1 month ago 5
HTML Question

Using Javascript with HTML to get a selected option and display a String based on value

Sorry if this has been asked before, I've looked around (this site and a couple others) for examples and snippets of code but nothing seems to work.

I'm taking a course in HTML, an assignment requires using a script to check a ddl and display a line of text based on the selected option. The problem is that what I've found online seems a bit different to the example our teacher provided (we're using Dreamweaver 2015 if that makes a difference.)

Here's what I'm stuck with after a couple hours of cannibalizing code from a few different threads.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Hot Buns </title>
</head>

<script type="text/javascript">
function showDetails()
{
var x= document.getElementById("slctOrder");
var val= x.options[x.selectedIndex].text;
<!-- DW only displays item(n) and len after the dot, I typed in "text" manually -->
document.forms["frmOrder"]["Details"].value = val;
<!-- I'm just trying to have it display anything at this point,
same as above, I typed "value" since DW doesn't seem to recognize this code
(this is from the teacher's example) -->
}

</script>
<body>
<p> <h2> Welcome to Hot Buns </h2> <br> <h3> Ham can we bee'f service? </h3></p>
<p> <h2> Place an order </h2> </p>
<form method="get" name="frmOder">
<select name="slctOrder" onChange="showDetails();">
<!-- I'm trying to call the function showDetails()
but neither onChange here nor onClick in the option tag seem to accomplish that -->
<option hidden selected="selected" value="0"> please select one of today's specials </option>
<option value="1" onClick="showDetails();"> Last of the Mo-jicama </option>
<option value="2" onClick="showDetails();"> Cheesus Is Born Burger </option>
<option value="3" onClick="showDetails();"> Beets of Burden Burger </option>
<option value="4" onClick="showDetails();"> Paranormal Pepper Jack-tivity Burger </option>
</select>

<output name="Details"/>
</form>

</body>
</html>

Answer

Couple of minor changes, but here's the working example:

update: outputting selected value into an html element vs alert.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
 <title> Hot Buns </title>
 </head>

<script type="text/javascript">
function showDetails()
{
  var 
    selectElement= document.getElementById("slctOrder"),
    outputElement = document.getElementById("output");
      
    outputElement.innerHTML = selectElement.options[selectElement.selectedIndex].text;
}

</script>
<body>
<p> <h2> Welcome to Hot Buns </h2> <br> <h3> Ham can we bee'f service? </h3></p>
<p> <h2> Place an order </h2> </p>
<form method="get" name="frmOder">
<select id="slctOrder" onChange="showDetails();"> 
<!-- I'm trying to call the function showDetails() 
but neither onChange here nor onClick in the option tag seem to accomplish that -->
    <option hidden selected="selected" value="0"> please select one of today's specials </option>
    <option value="1"> Last of the Mo-jicama </option>
    <option value="2"> Cheesus Is Born Burger </option>
    <option value="3"> Beets of Burden Burger </option>
    <option value="4"> Paranormal Pepper Jack-tivity Burger </option>
</select>

<div id="output" style="margin-top:5px"></div>
  
</form>

</body>
</html>

Comments