在选择下拉选项时，在div标签中给出特定答案

Question

I'm trying to develop a helpdesk & initially trying to input pre defined selected question with their solution. 我正在尝试开发一个服务台，并最初尝试在其解决方案中输入预定义的所选问题。 I'm stuck where i need to display different solution to different question depending on the question selected from the drop down list. 我被困在需要根据下拉列表中选择的问题针对不同问题显示不同解决方案的地方。

Please Help 请帮忙

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

Answer 1

You can use the onChange event to listen to value changes and react accordingly. 您可以使用onChange事件来监听值更改并做出相应的反应。

 function showAnswer(id) { document.getElementById('answer').innerHTML = answers[id]; } var answers = { js: 'JavaScript is a scripting language for computers. It is often run in web browser applications to create dynamic content like a popup message or a live clock. It is not related to and is different from the programming language Java.', html: 'HyperText Markup Language (HTML) is a Programming language for creating webpages. Webpages are usually viewed in a web browser. They can include writing, links, pictures, and even sound and video. HTML is used to mark and describe each of these kinds of content so the web browser can show them correctly.', css: 'Cascading Style Sheets, or CSS, are a way to change the look of HTML and XHTML web pages. CSS was designed by the W3C, and is supported well by most modern web browsers. The current version of CSS is CSS 2. CSS version 3 is currently being worked on. It will introduce new properties like border-radius.' };

 Select Query Type: <select onChange="showAnswer(this.value)"> <option value="js">JavaScript</option> <option value="html">HTML</option> <option value="css">CSS</option> </select> <hr /> <div id="answer">JavaScript is a scripting language for computers. It is often run in web browser applications to create dynamic content like a popup message or a live clock. It is not related to and is different from the programming language Java.</div>

Answer 2

What do we want to achieve? 我们要实现什么？

Depending on a select option (type of question) we want to show a different solution/answer. 根据选择选项（问题的类型），我们希望显示不同的解决方案/答案。 The questions are meant to be stored in HTML and not being outsourced (according to the initial post). 这些问题应存储在HTML中，而不是外包（根据最初的帖子）。

Solution 解

The solution would be to store each solution in a different outsourced HTML file. 解决方案是将每个解决方案存储在不同的外包HTML文件中。 So one can edit and maintain the solutions in known HTML structure and also maintain each solution seperately. 因此，可以以已知的HTML结构编辑和维护解决方案，也可以分别维护每个解决方案。 Furthermore we do not keep all the solutions in our DOM anymore, which saves traffic and bits. 此外，我们不再将所有解决方案保留在DOM中，这样可以节省流量和比特。

Requirements 要求

For each solution we create one HTML file to it. 对于每种解决方案，我们都为其创建一个HTML文件。

index.html index.html

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

Solution1.html Solution1.html

<h1>Solution 1</h1>
<p>Hello there, I am solution #1</p>

Solution2.html Solution2.html

<h1>Solution 2</h1>
<p>Hello there, I am solution #2</p>

Answer 3

Assuming that all your question and solution on the HTML itself, you can try the solution given below. 假设您所有的问题和解决方案都在HTML本身上，则可以尝试以下给出的解决方案。

HTML 的HTML

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

JS JS

(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';
        }
    })
});

})()

Here is a working copy in jsFiddle http://jsfiddle.net/vpwj3a42/ 这是jsFiddle中的工作副本http://jsfiddle.net/vpwj3a42/

Hope this helps ! 希望这可以帮助！

在选择下拉选项时，在div标签中给出特定答案

问题描述

3 个解决方案

解决方案1
2 2015-07-09 06:28:06

解决方案2
1 2015-07-09 06:39:08

What do we want to achieve? 我们要实现什么？

Solution 解

Requirements 要求

index.html index.html

Solution1.html Solution1.html

Solution2.html Solution2.html

解决方案3
0 已采纳 2015-07-09 06:51:10

在选择下拉选项时，在div标签中给出特定答案

问题描述

3 个解决方案

解决方案1 2 2015-07-09 06:28:06

解决方案2 1 2015-07-09 06:39:08

What do we want to achieve? 我们要实现什么？

Solution 解

Requirements 要求

index.html index.html

Solution1.html Solution1.html

Solution2.html Solution2.html

解决方案3 0 已采纳 2015-07-09 06:51:10

解决方案1
2 2015-07-09 06:28:06

解决方案2
1 2015-07-09 06:39:08

解决方案3
0 已采纳 2015-07-09 06:51:10