动态下拉选择后输出文本 HTML

Question

我有动态下拉菜单的代码（取自该网站），见下文。但是，我不知道如何让它在你做出选择后生成文本。在我选择了我的两个选项后，我希望它在下面有一个我可以稍后更改的填充句（“这是虚拟文本”）。我需要每个组合的文本都是不同的文本。

此外，如果您知道如何让我的两个选择并排而不是一个在另一个之上，那就太好了，但不需要！

我正在尝试创建一个网站，但对 HTML 的经验很少，并且一直在使用网上找到的大量代码。我知识渊博，足以正确编辑代码，只是不创建代码。任何帮助都会很棒！谢谢。

<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>

Answer 1

请检查此代码。
我还没有写完整的代码，会太长。

如果您想为每个选择设置自定义文本，请编辑 display() 函数（参见 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>

动态下拉选择后输出文本 HTML

Outputting Text After Dynamic Drop Down Selection HTML

html

dynamic

output

dropdown