My dropdown is working great, it shows the needed information but when I go back to the top selection "What would you like to learn today?" the prior information is not cleared. Any thoughts on how to correct this?
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>you could use like this
<option value="" disabled selected>Select your option</option>
Since it won't happen automatically, what you can do is:
selected.if condition if the first option is selected.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>