我有一个动态下拉列表的代码(取自这个网站(，请参阅下面。然而，我不知道如何使它在您做出选择后生成文本。我希望在我选择了两个选项后，它下面有一个填充句，我可以稍后更改("这是伪文本"(。我需要每个组合的文本都是不同的文本。
此外，如果你知道如何让我的两个选择并排，而不是一个在另一个上面，那将是很好的，但不需要！
我正在尝试创建一个网站，对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>
请签出此代码
我还没有写完整的代码，太长了
如果您想为每个选择设置自定义文本，请编辑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>