Блог

Я перечислил, и я хочу, чтобы, когда пользователь выбирал значение из выпадающего списка, затем на основе этого списка значений добавлялся в HTML, который я пробовал, но мой список не очищал предыдущий dom от его добавления, может кто-нибудь помочь мне с решениями вот мой код

  <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 amp; Antworten</h1>
     <div id="accordion" class="acco">
     </div>
 

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

      }
 

user $(«#accordion»).empty();чтобы очистить который внутри #accordion

     <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)
        $("#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
        });
      }

      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 amp; Antworten</h1>
     <div id="accordion" class="acco">
     </div>