下拉问题清除选择

Question

我的下拉菜单效果很好，它显示了所需的信息，但是当我返回顶部选择时“你今天想学什么？" 未清除先验信息。关于如何纠正这个问题有什么想法吗？

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>

Answer 1

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>

你可以这样使用

<option value="" disabled selected>Select your option</option>

Answer 2

由于它不会自动发生，您可以做的是：

一旦任何选项为 selected，请禁用第一个选项。
如果第一个选项是selected，则添加if条件。

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>

下拉问题清除选择

Dropdown issues clearing selection

html

javascript

dropdown