javascript - Flitering array based on select value

Question

I have listed and I want when user select the value from the dropdown then based on that value list will append into HTML I have tried but my list not clearing the previous dom its appending, Can someone help me with the solutions here is my code

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

   <script>

    var Result = [];
    inputvalue="A"

    alldata = [
        {
            Answer: "Ans A",
            Title: "For A",
            Topic: "A"
        },

        {
            Answer: "Ans B",
            Title: "For B",
            Topic: "B"
        },

        {
            Answer: "Ans C",
            Title: "For C",
            Topic: "C"
        },

        {
            Answer: "Ans second A",
            Title: "For 1A",
            Topic: "A"
        }
    ];

    $(function () {
       
        onSuccess(alldata,inputvalue)
    });

    function onSuccess(objItems,inputvalue) {
        objItems = objItems.filter(x => x.Topic == inputvalue)

        for (var i = 0; i < objItems.length; i++) {
            var data = '<h3 class="myheading">' + objItems[i].Title + '</h3>'
            data += '<div class="mydiv">'
            data += '<p>' + objItems[i].Answer + '</p>'
            data += '</div>'
            $('#accordion').append(data);
        }
        $("#accordion").accordion({
            heightStyle: "Content",
            collapsible: true
        });
      }

      function myFunction() {
        var SelectedValue = document.getElementById("mySelect").value;
        document.getElementById("demo").innerHTML = "You selected: " + SelectedValue;
        onSuccess(alldata,SelectedValue); 
       };

      </script>
      <select id="mySelect" onchange="myFunction()">
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
      </select>

     <p>When you select a new car, a function is triggered which outputs the value of the selected car. 
     </p>

     <p id="demo"></p>

     <div class="mainWrapper" style="margin-top:-30px">
     <h1 class="headingtext" style="font-weight:800">Fragen & Antworten</h1>
     <div id="accordion" class="acco">
     </div>

标签： javascriptjquery

Answer 1

function onSuccess(objItems,inputvalue) {
        objItems = objItems.filter(x => x.Topic == inputvalue)
        $("#accordion").empty();
        for (var i = 0; i < objItems.length; i++) {
            var data = '<h3 class="myheading">' + objItems[i].Title + '</h3>'
            data += '<div class="mydiv">'
            data += '<p>' + objItems[i].Answer + '</p>'
            data += '</div>'
            $('#accordion').append(data);
        }
        $("#accordion").accordion({
            heightStyle: "Content",
            collapsible: true
        });
            var head = document.getElementsByTagName('head')[0];
            var link = document.createElement('link');
            var script = document.createElement('script');
            var script_ui = document.createElement('script');
            link.href = 'https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css';
            script.src = 'https://code.jquery.com/jquery-1.10.2.js';
            script_ui.src = 'https://code.jquery.com/ui/1.10.4/jquery-ui.js';

            head.appendChild(link);
            head.appendChild(script);
            head.appendChild(script_ui);

      }