Mi menú desplegable funciona muy bien, muestra la información necesaria, pero cuando vuelvo a la selección superior " ¿Qué te gustaría aprender hoy? ", la información anterior no se borra. ¿Alguna idea sobre cómo corregir esto?
var jsonStringProcessing = '[{"Question":"Where would I find information on late trips?","Answer":"By using the Late Trip Application you can see incoming mail to your facility.","Link":"https://www.usps.com"},\ {"Question":"How many DPS errors will I have?","Answer":"Log into the application and drill down by zip 4 facility.","Link":"https://www.usps.com"},\ {"Question":"What should I do if im missing a trip?","Answer":"Login into the ___ application and drill down by facility.","Link":"https://www.usps.com"},\ {"Question":"What should I do if a load plan fails?","Answer":"Contact __ via the __ application","Link":"https://www.usps.com"},\ {"Question":"Where do I report late arriving trips?","Answer":"Click on the below hyper link to submit information.","Link":"https://www.usps.com"},\ {"Question":"How can I control work hours to plan?","Answer":"By logging into IVES and entering the appropriate information you can plan and schedule employees.","Link":"https://www.usps.com"}]'; var jsObjectProcessing = JSON.parse(jsonStringProcessing); // fill processing select list $.each(jsObjectProcessing, function (key, val) { $("#processing").append("<option>" + val.Question + "</option>"); }); //$(document).ready(function() { $("#processing").change(function () { var selectedItem = $(this).val(); $.each(jsObjectProcessing, function () { if (this.Question == selectedItem) { $("#listProcessing").html( '<b>Answer:</b> ' + this.Answer + '<br>' + '<b>Link:</b> <a href="' + this.Link + '" target="_blank">' + this.Link + '</a>' ); } }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-6 mb-5 mx-auto"> <select class="custom-select shadow-sm" id="processing"> <option value="">What would you like to learn today?</option> </select> <div class="mt-2"> <div id="listProcessing"> </div> </div> </div> var jsonStringProcessing = '[{"Question":"Where would I find information on late trips?","Answer":"By using the Late Trip Application you can see incoming mail to your facility.","Link":"https://www.usps.com"},\ {"Question":"How many DPS errors will I have?","Answer":"Log into the application and drill down by zip 4 facility.","Link":"https://www.usps.com"},\ {"Question":"What should I do if im missing a trip?","Answer":"Login into the ___ application and drill down by facility.","Link":"https://www.usps.com"},\ {"Question":"What should I do if a load plan fails?","Answer":"Contact __ via the __ application","Link":"https://www.usps.com"},\ {"Question":"Where do I report late arriving trips?","Answer":"Click on the below hyper link to submit information.","Link":"https://www.usps.com"},\ {"Question":"How can I control work hours to plan?","Answer":"By logging into IVES and entering the appropriate information you can plan and schedule employees.","Link":"https://www.usps.com"}]'; var jsObjectProcessing = JSON.parse(jsonStringProcessing); // fill processing select list $.each(jsObjectProcessing, function (key, val) { $("#processing").append("<option>" + val.Question + "</option>"); }); //$(document).ready(function() { $("#processing").change(function () { var selectedItem = $(this).val(); $.each(jsObjectProcessing, function () { if (this.Question == selectedItem) { $("#listProcessing").html( '<b>Answer:</b> ' + this.Answer + '<br>' + '<b>Link:</b> <a href="' + this.Link + '" target="_blank">' + this.Link + '</a>' ); } }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-6 mb-5 mx-auto"> <select class="custom-select shadow-sm" id="processing"> <option value="" disabled selected>What would you like to learn today?</option> </select> <div class="mt-2"> <div id="listProcessing"> </div> </div> </div>podrías usar así
<option value="" disabled selected>Select your option</option>Como no sucederá automáticamente, lo que puede hacer es:
selected cualquier opción.if si se selected la primera opción. var jsonStringProcessing = '[{"Question":"Where would I find information on late trips?","Answer":"By using the Late Trip Application you can see incoming mail to your facility.","Link":"https://www.usps.com"},\ {"Question":"How many DPS errors will I have?","Answer":"Log into the application and drill down by zip 4 facility.","Link":"https://www.usps.com"},\ {"Question":"What should I do if im missing a trip?","Answer":"Login into the ___ application and drill down by facility.","Link":"https://www.usps.com"},\ {"Question":"What should I do if a load plan fails?","Answer":"Contact __ via the __ application","Link":"https://www.usps.com"},\ {"Question":"Where do I report late arriving trips?","Answer":"Click on the below hyper link to submit information.","Link":"https://www.usps.com"},\ {"Question":"How can I control work hours to plan?","Answer":"By logging into IVES and entering the appropriate information you can plan and schedule employees.","Link":"https://www.usps.com"}]'; var jsObjectProcessing = JSON.parse(jsonStringProcessing); // fill processing select list $.each(jsObjectProcessing, function (key, val) { $("#processing").append("<option>" + val.Question + "</option>"); }); //$(document).ready(function() { $("#processing").change(function () { var selectedItem = $(this).val(); if (selectedItem == ""){ $("#listProcessing").html(""); } else{ $.each(jsObjectProcessing, function () { if (this.Question == selectedItem) { $("#listProcessing").html( '<b>Answer:</b> ' + this.Answer + '<br>' + '<b>Link:</b> <a href="' + this.Link + '" target="_blank">' + this.Link + '</a>' ); } }); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-6 mb-5 mx-auto"> <select class="custom-select shadow-sm" id="processing"> <option value="">What would you like to learn today?</option> </select> <div class="mt-2"> <div id="listProcessing"> </div> </div> </div>