Outputting Text After Dynamic Drop Down Selection HTML

I have the code for a dynamic dropdown (taken from this website), see below. However, I don't know how to make it generate text after you make the selections. I would like it after I choose my two options for it to have a filler sentence underneath that I can change later ("This is dummy text"). I need the text for each combination to be different text.

Also, if you know how to make my the two selections side-by-side instead of one on top of the other, that would be great, but not needed!

I am trying to create a website and have very minimal experience with HTML, and have been using a lot of code found online. I am knowledgable enough to edit code properly, just not create it. Any help would be amazing! Thank you.

<html>
<head>
    <!- This is a comment->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript">
function dynamicdropdown(listindex)
{
    switch (listindex)
    {
    case "manual" :
        document.getElementById("status").options[0]=new Option("Select status","");
        document.getElementById("status").options[1]=new Option("OPEN","open");
        document.getElementById("status").options[2]=new Option("DELIVERED","delivered");
        break;
    case "online" :
        document.getElementById("status").options[0]=new Option("Select status","");
        document.getElementById("status").options[1]=new Option("OPEN","open");
        document.getElementById("status").options[2]=new Option("DELIVERED","delivered");
        document.getElementById("status").options[3]=new Option("SHIPPED","shipped");
        break;
    }
    return true;
}
</script>
</head>
<title>Dynamic Drop Down List</title>
<body>
<div class="category_div" id="category_div">Chapter:
    <select id="source" name="source" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);">
    <option value="">Select source</option>
    <option value="manual">MANUAL</option>
    <option value="online">ONLINE</option>
    </select>
</div>
<div class="sub_category_div" id="sub_category_div">Lesson:
    <script type="text/javascript" language="JavaScript">
    document.write('<select name="status" id="status"><option value="">Select status</option></select>')
    </script>
    <noscript>
    <select id="status" name="status">
        <option value="open">OPEN</option>
        <option value="delivered">DELIVERED</option>
    </select>
    </noscript>
</div>
</body>

Solution

Please checkout this code.
I haven't written the entire code, it would be too long.

Here if you would like to set custom text for each selection please edit the display() function (see the commented line in the javascript).

function dynamicList() {
    var chapter = document.getElementById("chapter");
    var lesson = document.getElementById("lesson");
    switch (chapter.value) {
        case "online":
            lesson.length = 0;
            var option = document.createElement("option");
            option.value = "";
            option.text = "Select status";
            lesson.add(option);
            var option = document.createElement("option");
            option.value = "open";
            option.text = "Open";
            lesson.add(option);
            option = document.createElement("option");
            option.value = "delevered";
            option.text = "Delevered";
            lesson.add(option);
            break;
        case "manual":
            lesson.length = 0;
            var option = document.createElement("option");
            option.value = "";
            option.text = "Select status";
            lesson.add(option);
            var option = document.createElement("option");
            option.value = "open";
            option.text = "Open";
            lesson.add(option);
            option = document.createElement("option");
            option.value = "delevered";
            option.text = "Delevered";
            lesson.add(option);
            option = document.createElement("option");
            option.value = "shipped";
            option.text = "Shipped";
            lesson.add(option);
            break;
        default:
            display();
    }
}

function display() {
    var chapter = document.getElementById("chapter");
    var lesson = document.getElementById("lesson");
    var result = document.getElementById("result");
    if (chapter.value != "" && lesson.value != "") {
        result.innerHTML = "<span class='text'>You have selected " + chapter.value + " and " + lesson.value + "</span>";
    } else {
        result.innerHTML = "<span class='text'>Please select the both options</span>";
    }
    //for using custom combination of values use if statement and use the values as condition like this
    // if(chapter.value=="online" && lesson.value=="open")
    // {
    //   write the code here (when chapter value=online and lesson value=open)
    // }
}

#result
  {
    margin-top: 15px;
    float: left;
    color:#0078d7;
  }
  .categories
  {
    float: left;
  }

<!DOCTYPE html>
<html>
   <head>
      <title>sample</title>
   </head>
   <title>Dynamic Drop Down List</title>
   <body>
      <div class="categories">
         Chapter:
         <select id="chapter" onchange="dynamicList()" style="margin-right:25px">
            <option value="">Select source</option>
            <option value="online">Online</option>
            <option value="manual">Manual</option>
         </select>
         lesson:
         <select id="lesson" onchange="display()">
            <option value="">Select status</option>
         </select>
         <br>
         <div id="result"></div>
      </div>
   </body>