如何解决动态下拉选择HTML后输出文本
我有一个动态下拉菜单的代码（从此网站获取），请参见下文。但是，我不知道如何在选择后使其生成文本。在选择了两个选项之后，我希望在其下面有一个填充词，以便以后更改（“这是虚拟文本”）。我需要每个组合的文字都是不同的文字。
此外，如果您知道如何将我的两个选择并排放置，而不是一个接一个地放置，那很好，但不是必需的！
我正在尝试创建一个网站，并且对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","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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。