CODEWITHSUNDEEP
javascripthtmldropdown
tr303808
tr303808

Reputation: 361

Dropdown issues clearing selection

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>

Upvotes: 1

Views: 61

Answers (2)

NcXNaV
NcXNaV

Reputation: 1761

Since it won't happen automatically, what you can do is:

  1. Disable the first option once any options are selected.
  2. Add 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>

Upvotes: 1

Rishab Vaigankar
Rishab Vaigankar

Reputation: 443

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>

Upvotes: 2

Related Questions