我们想要实现什么目标？

Question

我正在努力开发一个服务台和帮助台。最初尝试用他们的解决方案输入预定义的选定问题。根据从下拉列表中选择的问题，我被困在需要根据不同问题显示不同解决方案的地方。

请帮助

<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

您可以使用onChange事件来监听值更改并做出相应的反应。

＆＃13;

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.'
};

＆＃13;

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>

＆＃13;

Answer 2

我们想要实现什么目标？

根据选择选项（问题类型），我们希望显示不同的解决方案/答案。问题意味着存储在HTML中而不是外包（根据最初的帖子）。

解决方案

解决方案是将每个解决方案存储在不同的外包HTML文件中。因此，可以编辑和维护已知HTML结构中的解决方案，并单独维护每个解决方案。此外，我们不再将所有解决方案保留在DOM中，从而节省了流量和比特。

要求

对于每个解决方案，我们都会为其创建一个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

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

Solution2.html

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

Answer 3

假设您对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

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

})()

以下是jsFiddle http://jsfiddle.net/vpwj3a42/

中的工作副本

希望这有帮助！

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

3 个答案:

我们想要实现什么目标？

解决方案

要求

的index.html

Solution1.html

Solution2.html