Javascript 选择下拉选项时，在div标签中给出具体答案
我正在尝试开发一个帮助台&最初尝试输入预定义的选定问题及其解决方案。我被困在需要根据从下拉列表中选择的问题显示不同问题的不同解决方案的地方 请帮忙Javascript 选择下拉选项时，在div标签中给出具体答案,javascript,html,Javascript,Html,我正在尝试开发一个帮助台&最初尝试输入预定义的选定问题及其解决方案。我被困在需要根据从下拉列表中选择的问题显示不同问题的不同解决方案的地方 请帮忙 <html> <head> <title>HelpDesk</title> </head> <body> <h1 align="center">Helpdesk</h1> <hr
<html>
<head>
<title>HelpDesk</title>
</head>
<body>
<h1 align="center">Helpdesk</h1>
<hr>
<form align="center">
Select Question Type :
<select>
<option>Select Query Type</option>
<option id="1">Internet not working</option>
<option id="2">Cannot download file</option>
</select>
</form>
</body>
</html>
帮助台
帮助台
选择问题类型：
选择查询类型
互联网不起作用
无法下载文件
onChange函数showAnswer（id）{
document.getElementById（'answer'）.innerHTML=answers[id]；
}
var答案={
js:“JavaScript是一种用于计算机的脚本语言。它通常在web浏览器应用程序中运行，以创建动态内容，如弹出消息或实时时钟。它与Java编程语言无关，也不同。”，
html:“超文本标记语言（html）是一种用于创建网页的编程语言。网页通常在web浏览器中查看。它们可以包括文字、链接、图片，甚至声音和视频。html用于标记和描述每种内容，以便web浏览器能够正确显示。”，
css:“层叠样式表，或css，是一种改变HTML和XHTML网页外观的方法。css由W3C设计，并得到大多数现代web浏览器的良好支持。css的当前版本是css 2。css版本3目前正在开发中。它将引入新的属性，如边界半径。”
};
选择查询类型：
JavaScript
HTML
CSS
JavaScript是一种用于计算机的脚本语言。它通常在web浏览器应用程序中运行，以创建动态内容，如弹出消息或实时时钟。它与编程语言Java无关，也不同于Java。
我们想要实现什么？
根据选择选项（问题类型），我们希望显示不同的解决方案/答案。这些问题应该存储在HTML中，而不是外包（根据最初的帖子）
解决方案
解决方案是将每个解决方案存储在不同的外包HTML文件中。因此，可以在已知的HTML结构中编辑和维护解决方案，也可以单独维护每个解决方案。此外，我们不再将所有解决方案保留在DOM中，这节省了流量和比特数
要求
对于每个解决方案，我们为其创建一个HTML文件
index.html
帮助台
//这是一个简单的AJAX例程，任何框架都不会使其过载。
//如果您已经在使用jQuery，只需使用$.get（）
;var AJAX={
getXmlDoc:function（）{return（（window.XMLHttpRequest）？new-XMLHttpRequest（）：new-ActiveXObject（“Microsoft.XMLHTTP”）}，
//u:=url，f:=回调，c:=要传递给回调的任何参数
Get：函数（u、f、c）{
var tDoc=this.getXmlDoc（）；
tDoc.open（'GET'，u，true）；
tDoc.onreadystatechange=函数（）{
如果（tDoc.readyState==XMLHttpRequest.DONE&&tDoc.status==200）f（tDoc，c）；
else f（null，c）
};
tDoc.send（）；
}
};
//这个名称空间包含我们的功能
;var答案={
mDefaultType:“\u Default”，//我们的默认/回退答案的类型
//我们的变革选择活动
//e:=dom元素（=select）
_onChange：函数（e）{
var tF=e.value+'.html'；//要获取的文件名
//现在，我们正在从外包的html文件加载正确的内容
Get（tF，function（r，f）{
if（r）{
//获取我们的解决方案div
var tD=document.querySelector（“#解决方案”）；
如果（tD）tD.innerHTML=r.responseText
}
else console.log（''u onChange（）：找不到文件“'+f+'”）
}，tF）；
},
//我们将更改事件分配给select
Init:function（）{
var tS=document.querySelector（'#selType'）；
if（tS）tS.onchange=function（）{Answers.\u onchange（this）}
}
};
帮助台
选择问题类型：
选择查询类型
互联网不起作用
无法下载文件
解决方案1.html
解决方案1
你好，我是解决方案1
解决方案2.html
解决方案2
你好，我是解决方案2
假设所有问题和解决方案都在HTML上，您可以尝试下面给出的解决方案
HTML
这里有一个JSFIDLE中的工作副本
希望这有帮助 您正在使用asp.net mvc吗？没有，先生。我们将只需要通过HTML来完成。因为我们将给出解决方案，即只在静态页面中编辑代码。因此，您将在一个HTML页面中保存所有问题和答案？是的，先生。这是目前的要求。不是真正的“最佳实践”，但可以。如果您想更新您的答案/问题，您知道需要做多少工作吗？先生，谢谢您的代码。但根据不同的问题，解决方案将是冗长的描述。那么我应该如何修改代码呢？i、 e假设选项1有3个不同的步骤，选项2将有不同的解决方案。怎么做？你已经把解决方案存储在某个地方了，对吗？如果是
<html>
<head>
<title>HelpDesk</title>
<script>
//This is out simple AJAX routine to not overload it by any framework.
//If you are already using jQuery, just use $.get()
;var AJAX = {
getXmlDoc: function(){return ((window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"))},
//u:=url, f:=callback, c:=any param to pass to callback
Get: function(u, f, c){
var tDoc = this.getXmlDoc();
tDoc.open('GET', u, true);
tDoc.onreadystatechange = function(){
if (tDoc.readyState === XMLHttpRequest.DONE && tDoc.status === 200) f(tDoc, c);
else f(null, c)
};
tDoc.send();
}
};
//This namespace holds our functionality
;var Answers = {
mDefaultType: '_Default', //The type of our default/fallback answer
//Our select on change event
//e:=dom element (=select)
_onChange: function(e){
var tF = e.value + '.html'; //The filename to fetch
//Now we are loading the correct content from the outsourced html file
AJAX.Get(tF, function(r, f){
if (r){
//Fetching our solution div
var tD = document.querySelector('#Solution');
if (tD) tD.innerHTML = r.responseText
}
else console.log('_onChange(): File not found "' + f + '"')
}, tF);
},
//We assign the change event to the select
Init: function(){
var tS = document.querySelector('#selType');
if (tS) tS.onchange = function(){Answers._onChange(this)}
}
};
</script>
</head>
<body onload = 'Answers.Init()'>
<h1 align="center">Helpdesk</h1>
<hr>
<form align="center">
Select Question Type :
<!-- Here we need an id to assign the javascript event -->
<select id = 'selType'>
<option>Select Query Type</option>
<!-- We do not require id on options, yet values -->
<option value = 'Solution1'>Internet not working</option>
<option value = 'Solution2'>Cannot download file</option>
</select>
<!-- Here we are storing our anwers -->
<div id = 'Solution'><!-- Filled by AJAX --></div>
</form>
</body>
</html>
<h1>Solution 1</h1>
<p>Hello there, I am solution #1</p>
<h1>Solution 2</h1>
<p>Hello there, I am solution #2</p>
<h1 align="center">Helpdesk</h1>
<hr>
<form align="center">
Select Question Type :
<select>
<option>Select Query Type</option>
<option value="1">Internet not working</option>
<option value="2">Cannot download file</option>
</select>
<div class="results">
<div class="ans" data-ans="1">Internet solution</div>
<div class="ans" data-ans="2">download solution</div>
</div>
</form>
(function(){
var ele = document.querySelectorAll('form select');
var result = document.querySelectorAll('.results .ans');
ele[0].addEventListener('change',function(e){
var matchVal = this.value.toString();
Array.prototype.forEach.call(result,function(val){
val.style.display = 'none';
if(val.getAttribute('data-ans') == matchVal){
val.style.display = 'block';
}
})
});
})()